為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+""; } 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 not appear that the server is available for ” “this application. Please”+ “ try again very soon. \\nError: ”+err.message);
}
}
/* 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‘;};
}