js_getComputed方法和style属性关于读取样式的区别

菜鸟教程:window.getComputedStyle() 方法的使用

getComputedStyle方法的使用

  • getComputedStyle方法是window对象下的方法,它接收element的值并获取它的最终属性.
    <style>
        .div1 {
            width: 150px;
            height: 150px;
            background-color: orange;
        }
    </style>
<body>
    <div class="div1" style="background-color: rgb(150,150,150);"></div>
    <script>
        var $div1 = document.getElementsByClassName('div1')[0];
        console.log(getComputedStyle($div1).backgroundColor);//rgb(150, 150, 150)
        console.log(getComputedStyle($div1).width);//150px
        console.log(getComputedStyle($div1).src);//undefined
        console.log($div1.style.width);//undefined
        console.log($div1.style.backgroundColor);//rgb(150, 150, 150)
    </script>
</body>

如上代码所示:div1最终显示为一个长150px宽150px的灰色div盒子.

  • 通过getComputedStyle获取的背景色是灰色,style嵌入样式与style内联属性冲突时内联属性优先,getComputedStyle方法返回的是三种属性中最终显示的属性.
  • 未定义的样式属性值为undefined.
  • .style方式只能获取内联属性的值.
  • getComputedStyle方法只能读取,不能写入,.style可以读取也可以写入
  • 兼容性:chrome\firefox\IE9 10 11支持
上一篇:window.getComputedStyle能够获取元素的实际样式,但是低版本的ie8及以下不支持,如何在低版本的ie上兼容类似的功能


下一篇:JS获取样式