JavaScript访问控制外部CSS并判断浏览器版本

其实很多或者说大部分CSS文件对网页的描述都是以外部CSS的身份出现的，所以当需要做一些需要JS改变CSS而

出现的动态效果的时候，JS不得不去访问外部CSS，下面我们就来探讨一下JS访问外部CSS的例子。

这个例子就是点击按钮触发事件来改变DIV的背景颜色。首先请看CSS文件

.style1{ width: 400px; height: 500px; background-color: red; }
然后是HTML文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function test(eventObj){ //获取mycss.css中的所有类选择器 //这个0的意思是HTML页面中引入的第一个css var cssResult = document.styleSheets[0].rules; //获取指定的CSS类选择器,根据下标 var style1 = cssResult[0]; if(eventObj.value=="黑色"){ style1.style.backgroundColor="black"; }else{ style1.style.backgroundColor="red"; } } function test1(){ if(window.XMLHttpRequest){ if(!window.ActiveXObject){ alert("Mozilla, Safari"); }else alert("IE"); }else{ alert("IE6"); } } </script> <link rel="stylesheet" href="../css/6.css" type="text/css"></link> </head> <body> <div id="div1" class="style1">div1</div> <input type="button" value="黑色" onclick="test(this);"/> <input type="button" value="红色" onclick="test(this);"/> <br/><br/><br/> <input type="button" value="检测浏览器版本" onclick="test1();"/> </body> </html>
function test(eventObj){ //获取mycss.css中的所有类选择器 //这个0的意思是HTML页面中引入的第一个css var cssResult = document.styleSheets[0].rules; //获取指定的CSS类选择器,根据下标 var style1 = cssResult[0]; if(eventObj.value=="黑色"){ style1.style.backgroundColor="black"; }else{ style1.style.backgroundColor="red"; } }这个函数就是，其中的含义都已经介绍，应该说是一种很好的访问外部CSS的方式，当然了，对于浏览器的兼容需要

判断浏览器的版本，test1()函数说明了这个，分别是使用ActiveX的window的空间支持与否来判断，其实应该有更加全面的，回来再研究。

posted on 2012-04-10 13:39 sp2012 阅读(471) 评论(0) 编辑收藏举报