通常我们都会先获取元素，然后得到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. java系列--批量处理

    批量删除 批量更新 二.分页 1.基于sql语句 1).基于ROWID分页 2).基于RONUM分页 3).基于数据分析分页 2.基于结果集

  2. 【MySQL】容器集群支持数据库实践

    京东容器数据库系统,管理1800台物理计算节点,生产1W+ 多MySQL Docker容器实例.架构简单可靠,Docker容器计算平台与MySQL集群管理平台解耦处理.为描述方便,京东容器化数据库系统 ...

  3. 设置与菜单项关联的Activity

    有些时候,应用程序需要单击某个菜单项时启动其他Activity(包括其他Service).对于这种需求,Android设置不需要开发者编写任何事件处理代码,只要调用MenuItem的setIntent ...

  4. 腾讯面试题：10G 个整数，乱序排列，要求找出中位数。内存限制为 2G。

    腾讯面试题:10G 个整数,乱序排列,要求找出中位数.内存限制为 2G. 题目和基本思路都来源网上,本人加以整理. 题目:在一个文件中有 10G 个整数,乱序排列,要求找出中位数.内存限制为 2G.只 ...

  5. 关于solaris中 crontab -e 出现数字0的解决办法

    解决方法: 通过网络,发现要设置编辑器的环境变量 $ EDITOR=vi  $ export EDITOR$ echo $EDITORvi$ crontab -e OK

  6. Flex4 flash builder保留MXML转换的AS代码

    Flex4 flash builder保留MXML转换的AS代码 项目->属性->Flex编译器 | 附加的编译参数 加上 -keep 生成的Test005-interface.as文件: ...

  7. margin三个值

    http://www.cnblogs.com/wangkongming/p/3204734.html margin标记可以带一个.二个.三个.四个参数,各有不同的含义. margin: 20px;(上 ...

  8. 如何快速定位到Eclipse自动添加的TODO

    把自动生成的// TODO ....前面加上todo,这样生成之后就会有编译错误,直接 ctrl+. 就到该位置了,可以删除todo留着// TODO ...,也可以ctrl+d删除一行: 不建议不生 ...

  9. jQuery获取URL中所带参数的办法

    可以使用正则表达式进行结果的拆分: http://www.cnblogs.com/babycool/p/3169058.html 可以直接进行所需内容的split: http://blog.scien ...

  10. 基于Xcode8插件开发～一键检测处理头文件引用

    Xcode8开放了新的一个Extension:Xcode Source Editor Extension,目的是让开发者可以正规的自主为IDE编写插件,虽然说系统现提供的功能还比较拮据,但是不妨碍我们 ...