JS如何访问修改css样式表

最新推荐文章于 2022-07-09 10:51:58 发布

BiuBiu_KM

最新推荐文章于 2022-07-09 10:51:58 发布

阅读量803

点赞数

分类专栏： JS 文章标签： css javascript

本文链接：https://blog.csdn.net/BiuBiu_KM/article/details/54584093

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS访问修改样式表，可方便的动态修改页面：
一、访问内联style属性的css样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS内部类</title>
    <script type="text/javascript">
        //修改内部style属性
        function test4(eventObj) {
            //window.alert(eventObj.value);//可以输出button的value
            if (eventObj.value=="黑色") {
                //获取div1
                var div1=document.getElementById('div1');
                div1.style.background="black";
                div1.style.color="white";
            }else if(eventObj.value=="红色") {
                //获取div1
                var div1=document.getElementById('div1');
                div1.style.background="red";
                div1.style.color="black";
            }
        }
    </script>
    <link rel="stylesheet" type="text/css" href="css/jsdemo6.css">
</head>

<body>
    !-- 如何通过js修改style来修改style -->
    <div id="div1" style="width: 400px;height: 300px;background: red;">div1</div>
    <input type="button" name="" value="黑色" onclick="test4(this)">
    input type="button" name="" value="红色" onclick="test4(this)">
</body>
</html>

效果图：

JS控制css样式

二、访问外部定义的CSS样式（类自定义的CSS样式）

  因为CSS数据不会存储在style属性中，而是存储在类中的，所以**无法**使用上面的方法访问。

访问方法：先去的定义类的样式表的引用，用document.styleSheets集合实现这个目的。这个集合包含HTML页面中所有的样式表。DOM为每个样式表定义一个cssRules的集合，这个集合中包含定义在样式表中的所用css规则（PS:Mozilla和Safari总是cssRules,而IE中是rules）。
jsdemo6.css:

.div2{
    width: 600px;
    height: 400px;
    background: black;
}

jsdemo6.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS内部类</title>
    <script type="text/javascript">
        //此法有兼容性问题,ie用rules可以访问，ff用cssRules才能访问。chrome报错
        function test5(eventObj){
            //获取jsdemo6.css中的所有class选择器都获取
            var ocssRules=document.styleSheets[0].rules||document.styleSheets[0].cssRules;
            //从ocssRules中取出你希望的class
            var div2=ocssRules[0];//表示css文件的第一个规则
            if (eventObj.value=="黑色") {
                div2.style.background="black";
            }else if (eventObj.value=="红色") {
                div2.style.background="red";
            }

        }
    </script>
    <link rel="stylesheet" type="text/css" href="css/jsdemo6.css">
</head>
<body>
<!-- 引用外部style文件 -->
<div id="div2" class="div2">div2</div>
<input type="button" name="" value="黑色" onclick="test5(this)">
<input type="button" name="" value="红色" onclick="test5(this)">

</body>
</html>