JavaScript访问控制外部CSS并判断浏览器版本-js教程-PHP中文网

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

高洛峰

发布： 2016-11-26 10:04:12

原创

1157人浏览过

其实很多或者说大部分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="http://www.php1.cn/"> </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.2cto.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="http://www.php1.cn/"> </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>

易笔AI论文

专业AI论文生成，免费生成论文大纲，在线生成选题/综述/开题报告等论文模板

103

查看详情

立即学习“Java免费学习笔记（深入）”；

[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的方式，当然了，对于浏览器的兼容需要