通常我们都会先获取元素，然后得到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. Eclipse配置Git发布项目到Github

    很牛叉的博客http://blog.csdn.net/luckarecs/article/details/7427605 一.安装插件 菜单栏Help --> Install New Softw ...

  2. 使用MyEclipse开发第一个Web程序

    MyEclipse环境配置 首先,安装一个MyEclipse,然后进行一些相关的环境配置(Window->Preferences): 比如字体.Formatter等. 也可以从Eclipse中导 ...

  3. UILable添加事件

    原文:http://blog.sina.com.cn/s/blog_9e8867eb0101dk6t.html 先需要声明的是:UILabel或UIImageView的 userInteraction ...

  4. Jenkins中deploy插件的deploy war/ear to a container与deploy artifacts to maven reepository区别

    deploy war/ear to a container:发布war包到服务器 deploy artifacts to maven reepository:发布到maven服务器

  5. sqlite3编译

    1.sqlite3编译: 1.PC版: 1.解压: tar xvf sqlite-autoconf-3140100.tar.gz cd sqlite-autoconf-3140100/ 2.检查配置 ...

  6. 1.4.2.5. 测试（Core Data 应用程序实践指南）

    测试的方法也很简单: 首先,在AppDelegate.h里面引用CoreDataHelper @property (strong, nonatomic, readonly)CoreDateHelper ...

  7. js原生设计模式——10适配器模式之参数适配器

    原理:参数适配器说白了就是给出要带入数据字段的对应字段的默认值,一旦数据字段值不足,就取默认值补足. [写法一]:直接返回 <!DOCTYPE html><html lang=&qu ...

  8. js原生设计模式——8单例模式之简约版属性样式方法库

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. UED大全

    http://www.baiduux.com/  百度UFOhttp://ued.sohu.com/  搜狐UEDhttp://ued.taobao.com/  淘宝UEDhttp://www.ued ...

  10. MyBatis 一对多,多对一关联查询的时候Mapper的顺序

    要先写association,然后写collection:这是由DTD决定的: <resultMap ...> <association ...> </associati ...