Ajax Hack Hack 11 dynamic generation style

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: