获取元素最终的background-color

通常我们都会先获取元素，然后得到style对象获取对应的css属性值；

下面，假设我定义一个div并在css中给定了指定的background-color：

这里并没有考虑!important/内联的形式。

如：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>获取元素最终background-color</title>

     <style type="text/css">

         #div1 {

             width:200px;

             height: 100px;

             background-color:cornflowerblue;

         }

     </style>

 </head>

 <body>

 <div id="div1"></div>

 </body>

 </html>

页面效果：

获取元素最终的background-color

 !function() {

         var elem = document.getElementById('div1');

         var bgColor = elem.style["backgroundColor"];

         console.log(bgColor);

     }();

这里我们使用最原始的办法来获取元素background-color；发现并没有获取得到任何值。

获取元素最终的background-color

那问题来了；我们怎么获取得到目前元素的最终背景色呢？是不是除了这个意外就没有办法了？

其实在DOM2样式规范在document.defaultView中包含了一个getComputedStyle()方法，该方法返回一个只读的CSSStyleDeclaration对象；

该对象里包含了特定元素所有的计算样式。

这里我们修改一下js代码：

!function() {

        var elem = document.getElementById('div1');

        var bgColor = elem.style["backgroundColor"];

        console.log(bgColor);

        var cssStyle = document.defaultView.getComputedStyle(elem, null),

            resultBg = cssStyle.getPropertyValue('background-color');

        console.log(resultBg);

    }();

这里值得注意的是getPropertyValue接受的css属性值不是驼峰的形式；而是原有的css属性值。

获取元素最终的background-color

这样我们成功获取元素的background-color。

此外还有一个前面提示到的这里所讲的例子并没有考虑到!important/内联的形式。如果元素是内联形式的话那用原有的elem.style["backgroundColor"]即可获取，

但是由于项目维护的原因这里并不建议使用!important/内联的形式来改变css权重。

秒客网

获取元素最终的background-color

相关文章