javascript访问外部定义的CSS样式的例子

发布时间:2020-10-14编辑:脚本学堂
本文介绍下,javascript访问外部定义的css样式的一个例子,有需要的朋友参考下吧。

学习下如何在js代码中,访问外部css文件中的样式。

1,css文件 event3.css
 

复制代码 代码示例:
.mydiv{
    width:600px;
    height:400px;
    background-color:red;
}

2,html文件 event3.html
 

复制代码 代码示例:

<html>
<head>
<link rel="stylesheet" type="text/css" href="event3.css">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript">   
    function test(){
        window.alert(new Date().toLocaleString());
    }

//访问外部定义的CSS样式(类定义的CSS样式)
    function test2(eventObj){
        //获取event.css中所有class选择器都获取
        //注意:Mozilla和Safasi中是cssRules,而IE中是rules
        var ocssRules=document.styleSheets[0].rules;
        //从ocssRules中取得你需要的class
        var mydiv=ocssRules[0]; //这个0是表示是event3.css文件中的第一个规则
        if(eventObj.value=="黑色"){
            //通过Id来区分进行操作
            var div1=document.getElementById("div1");
            div1.style.backgroundColor="black";
        }else if(eventObj.value=="红色"){
            var div1=document.getElementById("div1");
            //div1.style.background-color="balck"; //这样写是错的
            div1.style.backgroundColor="red";
        }
    }
</script>
</head>
<body>
    <input type="button" value="点击显示时间" onclick="test()" />
    <div id="div1" class="mydiv">       
    </div>
    <input type="button" value="黑色" onclick="test2(this)"/>
    <input type="button" value="红色" onclick="test2(this)"/>
</body>
</html>