通常我们都会先获取元素,然后得到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. 基于 Python 和 Scikit-Learn 的机器学习介绍

    Reference:http://mp.weixin.qq.com/s?src=3&timestamp=1474985436&ver=1&signature=at24GKibw ...

  2. 建立ipython集群

    启动controller ipcontroller -- ip = ipaddress 设置ssh免登陆 因为需要分发文件,采用ssh通信,所以需要配置ssh免登陆 分发配置文件 scp contro ...

  3. VIM 第二天--快捷键

    好吧,今天是重新学习vim的第二天,不得不说,收货丰厚. 先来勉励一下自己: 存活(目前状态) 感觉很好 感觉更好,更强,更快 吃用vim超能力 vimtutor练到lesson 7了,略微总结一下, ...

  4. Coding 代码管理快速入门

    当项目创建好了之后,我们该如何上传代码到 coding 上呢?Coding 网站使用“ Git 仓库”(类似 github )来管理代码.其操作原理在于:利用 git 服务,将本地的项目目录下的文件同 ...

  5. IIS 启用w3wp.exe调试 没有找到w3wp进程

    必须条件: 在进程列表的下面,有个show processes in all sessions,把它勾上就能看到了 . VS中附加进程的方式调试IIS页面,以及设置断点无效问题解决 以前调试网站的时候 ...

  6. PHP 文件上传全攻略

    PHP文件上传功能一般都是大家使用事先封装好的函数,要用的时候直接使用已封装的函数就完了,但有时候不能使用封装函数,还真不大能记住PHP的上传相关的东西,在此做个总结,以备后用.   1.表单部分 允 ...

  7. spring mvc redirect设置FlashAttribute

    在Controller中设置: @RequestMapping("/redir") public String redir(Model model, RedirectAttribu ...

  8. use strict 的优点

    JavaScript严格模式详解 http://blog.csdn.net/airingyuan/article/details/25036297 http://ourjs.com/detail/52 ...

  9. QJsonObject和QJsonArray的巨坑

    最近用Qt的QJsonObject和QJsonArray当做类变量来存储运行信息,发现这两货真的是巨坑.让人有一种JJ fly的感觉/(ㄒoㄒ)/~~. 写了个例子来说明下: MainWindow:: ...

  10. VS2013使用WebDeploy发布网站到IIS服务器

    VS2013用Web Deploy方式发布网站到IIS服务器发布文档 VS版本:VS2013 服务器版本:Windows Server 2012 R2 IIS版本:IIS8.0 Web Deploy版 ...