ajax|动态Ajax Hack 之hack 11 动态产生样式

为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.font 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+"