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]
<!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>
<!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中的所有类选择器 www.zzzyk.com
   //这个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>

[html]
function test(eventObj){
            //获取mycss.css中的所有类选择器
            //这个0的意思是HTML页面中引入的第一个css
            var cssResult = document.styleSheets[0].rules;
            //获取指定的CSS类选择器,根据下标
            var style1 = cssResult[0];

&nbs

补充：web前端 , JavaScript ,