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

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

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

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

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

[html]
 
 
   
     
     
     
     
     
     
     
     
   
   
   

div1

 
     
    
  


 
    
   
 


 
   
 
   
   
   
   
   
   
 
 
  

div1

  
  
  



  
 

[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"; 
            } 
        } 
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的空间支持与否来判断，其实应该有更加全面的，回来再 研究。