通常我们都会先获取元素，然后得到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>

页面效果：

 !function() {

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

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

         console.log(bgColor);

     }();

这里我们使用最原始的办法来获取元素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。

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

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

获取元素最终的background-color的更多相关文章

  1. js之获取元素最终css属性

    很多时候 我们是不用jquery库的,虽然他很好,获取元素最终的css属性我们可以用:getComputedStyle window.getComputedStyle(element, null).g ...

  2. iframe获取元素

    原生js在网页中,父元素获取iframe中的元素: window.onload=function () { 例如: console.log(window.frames["iframe的nam ...

  3. JQuery获取元素类名

    一般而言,JQuery可以利用attr来获取元素的属性值, 1.$("元素").attr("属性");                //获取指定属性的值 2. ...

  4. JavaScript的DOM操作获取元素周边大小

    一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <scri ...

  5. 原生js获取元素样式

    摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...

  6. DOM获取元素、修改元素

    ## DOM获取元素.修改元素### 1.DOM#### ①什么是DOM?作用? > DOM是文档对象模型 > 作用:操作网页内容,可以开发网页内容特效和实现用户交互.#### ②DOM对 ...

  7. JS获取元素CSS值

    一.getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclara ...

  8. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

  9. javascript学习之通过class获取元素

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. [Angular Tutorial] 9 -Routing & Multiple Views

    在这一步中,您将学到如何创建一个布局模板,并且学习怎样使用一个叫做ngRoute的Angular模块来构建一个具有多重视图的应用. ·当您现在访问/index.html,您将被重定向到/index.h ...

  2. n皇后问题 [随机化算法，拉斯维加斯算法]

    问题: 如何能够在 n×n 的国际象棋棋盘上放置八个皇后,使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都不能处于同一条横行.纵行或斜线上. 分析: 这题常规的解法应该是回溯法, ...

  3. iOS workspace 依次编译多个工程

    目的:当我封装一个framework的时候,需要检验当前的改动,但是又不想编译完framework,又要编译测试工程. 步骤: 1. 选择测试工程 2. Edit Scheme 3. 选中Build- ...

  4. Sed替换 内容带反斜杠（/）

    sed "s#XXXX#${NAME}#" $MAIL_CONTENT > /tmp/MAIL_CONTENT1.tmp -----不论什么字符,紧跟着s命令的都被认为是新的 ...

  5. iOS 登陆之使用ShareSDK

    0. 概述 登陆要使用ShareSDK,可以实现多社交平台账号登陆,短信验证,并且都是永久免费的. 网址:www.mob.com 1.iOS 登陆之界面设置

  6. IIS7和Tomcat7整合，即IIS7和Tomcat共用80端口

    IIS7和Tomcat7整合,即IIS7和Tomcat共用80端口 背景: 最近公司有一个项目要上线,需要用到iis和tomcat整合,共用80端口.由于公司的数据都非常重要,只通过端口映射到外网的8 ...

  7. MyBatis 多个查询条件的传递

    <!-- 方法1,构建查询对象: QueryCondition qc = new QueryCondition(); qc.setGender(1); qc.setBirthday(new Da ...

  8. 初识JSON

    ▓▓▓▓▓▓ 大致介绍 JSON(JavaScript Object Notation  JavaScript对象表示法),JSON是一种数据格式,不是一种编程语言.虽然它的名字中有JavaScrip ...

  9. POJ2185(KMP)

    Milking Grid Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 7896   Accepted: 3408 Desc ...

  10. 转载：深入探讨 Java 类加载器

    转载地址 : http://www.ibm.com/developerworks/cn/java/j-lo-classloader/ 深入探讨 Java 类加载器 类加载器(class loader) ...