Ajax Hack 之hack 11 动态产生样式
来源:互联网 发布:js object to json 编辑:程序博客网 时间:2024/06/17 23: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.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‘;};
}
Find out the HTTP response headers when you "GET" a Web page
Choose the style for your message
<<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>- Ajax Hack 之hack 11 动态产生样式
- HACK
- HACK
- hack
- Hack
- hack
- hack
- hack
- hack
- HACK
- hack
- hack
- Hack技巧之条件hack
- Ajax Hack 之hack 13 在text或textarea里显示服务器信息
- web兼容---ie8、9、10、11hack、注释ie版本css样式hack
- Hack技巧之属性级hack
- Hack技巧之选择符级hack
- AJAX Hacks之Hack 4. 接收XML格式的数据
- WINDOWS未开函数揭密(1)
- Ajax Hack 之hack 13 在text或textarea里显示服务器信息
- Windows未公开函数揭密(3)
- Ajax Hack 之hack 12不刷新浏览器的情况下向服务器提交text或textarea的值
- 在VB6中用WINDOWS API函数读写INI文件
- Ajax Hack 之hack 11 动态产生样式
- 使用VB开发Windows环境下的串行通信程序
- Ajax Hacks-Hack 10. 使用CSS文件产生格式化的信息
- *** Web 存储系统窗体:窗体注册表 (new)***
- Ajax Hacks-hack9 深入了解HTTP Response
- 用VB实现屏幕阴暗操作
- Ajax Hacks-hack8 处理Request Object 的错误
- 在VB中实现窗体的动态效果
- Ajax Hacks-hack7接收JSON格式的数据