码迷,mamicode.com
首页 > Web开发 > 详细

JS中获取CSS样式的方法

时间:2018-09-24 21:07:39      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:空值   back   权重   键值   样式   black   get   没有   不能   

1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得。注意在CSS中单词之间用-连接,在JS中要用驼峰命名法

<div id="dv" style="width: 100px;height: 200px;background-color: pink; border: 1px solid green;"></div>
    <script>
        var dv = document.getElementById("dv");
        console.log(dv.style.width);    //100px
        console.log(dv.style["height"]);//200px
        console.log(dv.style.backgroundColor);//pink
        console.log(dv.style.border);//1px solid green
    </script>

2.对于外联样式表或者头部的style标签内的样式表里的样式内容,用上面的方法无法获得

可以使用js中的window.getComputedStyle(element,pseudoElement).属性名的方法获得。获取的样式是元素在浏览器中最终渲染效果的样式

其中window.可以省略

其中pseudoElement: 可选,伪类元素,当不查询伪类元素的时候可以忽略或者传入 null。

<style>
        #dv2{
            width: 100px;
            height: 200px;
            background-color: #0086b3;
            border: 1px solid red;
        }
    </style>
 <div id="dv2" style="border-color: black"></div>
    <script>
        var dv2 = document.getElementById("dv2");
        console.log(dv2.style["height"]);//空值,没有内联该样式无法获取
        console.log(dv2.style.backgroundColor);//空值,没有内联该样式无法获取
        console.log(window.getComputedStyle(dv2,null).width);//100px
        console.log(getComputedStyle(dv2,null).backgroundColor);//rgb(0, 134, 179)
        console.log(getComputedStyle(dv2,null).border); //1px solid rgb(255, 0, 0),内联样式修改成了黑色,内联的权重更高。
        console.log(getComputedStyle(dv2,null)["border"]); //1px solid rgb(255, 0, 0)键值对的方式当然也行

    </script>

3.修改CSS样式,只能通过ele.style.属性名的方式修改CSS样式,不能通过getComputedStyle()的方法修改。

JS中获取CSS样式的方法

标签:空值   back   权重   键值   样式   black   get   没有   不能   

原文地址:https://www.cnblogs.com/yucheng6/p/9696274.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!