为web内容动态定义和制定CSS样式。

JavaScript和DOM编程允许用户定义CSS样式属性，并应用于页面元素。一个典型的例子是一个wiki页面允许用户设计自己页面的方案和样式。

通常情况下，比较好的方法是将样式定义从JavaScript代码中分离出来。这样的习惯可以使元素独立扩展，降低web页面元素的复杂性，使之更高效。

本hack和上一个相似，根据用户选择的样式，动态显示服务器信息。和前一个不同之处就是：这里是在代码里边定义样式，然后应用于html。代码如下：

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.getElementById(“msgDisplay”; if(st){ setStyle(st,div.style); } else { setStyle(“plain”,div.style); } div.innerHTML=”

"+headers+"

}

}

/* Initialize a request object that is already constructed */

function initReq(reqType,url,bool){

try{

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

request.onreadystatechange=handleResponse;

request.open(reqType,url,bool);

request.send(null);

} catch (errv) {

alert(

“The application cannot contact 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 all ”+

“of this application‘s features!”;

}

}

如果浏览器支持CSS样式，每个页面上的每个HTML元素都会有一个style属性。例如，div元素有一个元素叫div.style允许JavaScript编写者为此div设置内联样式属性（如div.style.fontFamily="Arial"）。这就是setStyle函数的工作。两个参数一个是样式名称，例如“Fancy”（从预选定义的list里边选择），另一个是样式所指定的div元素。函数设定了HTML div元素在页面上的外观。

显示在页面上的信息（一串响应头信息）来自服务器的响应对象。如前一个hack一向，用户输入一个URL，然后点击tab或者其他部分，最后显示信息。代码如下：

“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