Ajax Hack Hack 11 dynamic generation style

Source: Internet
Author: User
Tags define object bool http request window
Ajax| News Ajax Hack Hack 11 dynamic generation style

Dynamically define and develop CSS styles for Web content.

JavaScript and DOM programming allow users to define CSS style attributes and apply them to page elements. A typical example is a wiki page that allows users to design their own page schemes and styles.

In general, the better approach is to separate the style definition from the JavaScript code. Such habits allow elements to be expanded independently, reducing the complexity of Web page elements and making them more efficient.

This hack is similar to the previous and dynamically displays server information based on the style selected by the user. The difference from the previous one is that it defines the style in the code and then applies it to HTML. The code is as follows:

var request;

var urlfragment= "http://localhost:8080/";

var St;

function Getallheaders (url,styl) {

if (URL) {

St=styl;

HttpRequest ("Get", url,true);

}

}

/* Set One or more CSS style attributes on a DOM element

Css2properties Object.

Parameters:

Sttype stands for a-style name, as in ' plain, ' fancy, ' loud, ' or ' Cosmo '.

Stylobj is the HTML element ' s style property, as in Div.style. */

function SetStyle (sttype,stylobj) {

Switch (sttype) {

Case ' plain ':

Stylobj.maxwidth= "80%";

Stylobj.border= "thin solid black";

Stylobj.padding= "5%";

Stylobj.textshadow= "None";

Stylobj.fontfamily= "Arial, serif";

Stylobj.fontsize= "0.9em";

Stylobj.backgroundcolor= "Yellow"; Break

Case ' loud ':

Stylobj.maxwidth= "80%";

Stylobj.border= "thin solid black";

Stylobj.padding= "5%";

Stylobj.fontfamily= "Impact, serif";

Stylobj.fontsize= "1.4em";

stylobj.textshadow= "0 0 2.0em Black";

Stylobj.backgroundcolor= "RGB (181,77,79)"; Break

Case ' Fancy ':

Stylobj.maxwidth= "80%";

Stylobj.border= "thin solid black";

Stylobj.padding= "5%";

Stylobj.fontfamily= "Herculanum, Verdana, serif";

Stylobj.fontsize= "1.2em";

Stylobj.fontstyle= "Oblique";

stylobj.textshadow= "0.2EM 0.2em Grey";

Stylobj.color= "RGB (21,49,110)";

Stylobj.backgroundcolor= "RGB (234,197,49)"; Break

Case ' Cosmo ':

Stylobj.maxwidth= "80%";

Stylobj.border= "thin solid black";

Stylobj.padding= "1%";

Stylobj.fontfamily= "Papyrus, serif";

Stylobj.fontsize= "0.9em";

stylobj.textshadow= "0 0 0.5em Black";

Stylobj.color= "Aqua";

Stylobj.backgroundcolor= "Teal"; Break

Default:

Alert (' Default ';

}

}

event handler for XMLHttpRequest function Handleresponse () {try{if (request.readystate = 4) {if (Request.status = 200) {/* All headers received as a single string */var headers = request.getallresponseheaders (); var div = Document.getelem Entbyid ("Msgdisplay"; if (ST) {SetStyle (st,div.style);} else {SetStyle ("plain", Div.style);} div.innerhtml= "

"+headers+"
"; } else {//request.status is 503 if the application isn ' t available;//500 if the application has a bug alert (request.status ); Alert ("A problem occurred with communicating between" + "the XMLHttpRequest object and the server program.";}} End outer if} catch (Err) {alert ("It does isn't appear that's the server is available to" this application.) Please "+" try again very soon. \\nError: "+err.message);

}

}

/* Initialize A Request object is already constructed * *

function Initreq (reqtype,url,bool) {

try{

/* Specify the function that would handle the HTTP response * *

Request.onreadystatechange=handleresponse;

Request.open (Reqtype,url,bool);

Request.send (NULL);

} catch (ERRV) {

Alert

"The application cannot contacts the server at the moment." +

"Please try again in a few seconds");

}

}

/* Wrapper function for constructing a request object.

Parameters:

Reqtype:the HTTP request type such as Get or POST.

Url:the URL of the server program.

Asynch:whether to send the request asynchronously or not. */

function HttpRequest (reqtype,url,asynch) {

mozilla-based Browsers

if (window. XMLHttpRequest) {

Request = new XMLHttpRequest ();

else if (window. ActiveXObject) {

Request=new ActiveXObject ("msxml2.xmlhttp");

if (! Request) {

Request=new ActiveXObject ("Microsoft.XMLHTTP");

}

}

The request could still be null if neither ActiveXObject

Initialization succeeded

if (request) {

Initreq (Reqtype,url,asynch);

} else {

Alert ("Your browser does not permit the use of" +

"Of this application ' s features!";

}

}

If the browser supports CSS styles, each HTML element on each page will have a style attribute. For example, a DIV element has an element called Div.style that allows JavaScript writers to set inline style attributes (such as div.style.fontfamily= "Arial") for this div. This is the work of the SetStyle function. Two parameters one is the style name, such as "Fancy" (selected from the list of preselected definitions), and the other is the DIV element specified by the style. The function sets the appearance of the HTML DIV element on the page.

The information that is displayed on the page (a sequence of response headers) is the response object from the server. As the previous hack has always been, the user enters a URL, then clicks tab or other section, finally displays the information. The code is as follows:

"Http://www.w3.org/tr/1999/rec-html401–19991224/strict.dtd" >

function Setspan () {

document.getElementById ("InStr". Onmouseover=function () {

This.style.backgroundcolor= ' Yellow ';

document.getElementById ("InStr". Onmouseout=function () {

this.style.backgroundcolor= ' White ';

}

Find out the HTTP response headers when you ' get ' a Web page



Choose the style for your message

javascript:void%200>



loud fancy cosmopolitan plain



Enter a URL:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.