获取元素最终的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>
页面效果：
!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的更多相关文章
- js之获取元素最终css属性
很多时候 我们是不用jquery库的,虽然他很好,获取元素最终的css属性我们可以用:getComputedStyle window.getComputedStyle(element, null).g ...
- iframe获取元素
原生js在网页中,父元素获取iframe中的元素: window.onload=function () { 例如: console.log(window.frames["iframe的nam ...
- JQuery获取元素类名
一般而言,JQuery可以利用attr来获取元素的属性值, 1.$("元素").attr("属性"); //获取指定属性的值 2. ...
- JavaScript的DOM操作获取元素周边大小
一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <scri ...
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- DOM获取元素、修改元素
## DOM获取元素.修改元素### 1.DOM#### ①什么是DOM?作用? > DOM是文档对象模型 > 作用:操作网页内容,可以开发网页内容特效和实现用户交互.#### ②DOM对 ...
- JS获取元素CSS值
一.getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclara ...
- 获取元素计算后的css样式封装
获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...
- javascript学习之通过class获取元素
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 基于 Python 和 Scikit-Learn 的机器学习介绍
Reference:http://mp.weixin.qq.com/s?src=3×tamp=1474985436&ver=1&signature=at24GKibw ...
- 建立ipython集群
启动controller ipcontroller -- ip = ipaddress 设置ssh免登陆 因为需要分发文件,采用ssh通信,所以需要配置ssh免登陆 分发配置文件 scp contro ...
- VIM 第二天--快捷键
好吧,今天是重新学习vim的第二天,不得不说,收货丰厚. 先来勉励一下自己: 存活(目前状态) 感觉很好 感觉更好,更强,更快 吃用vim超能力 vimtutor练到lesson 7了,略微总结一下, ...
- Coding 代码管理快速入门
当项目创建好了之后,我们该如何上传代码到 coding 上呢?Coding 网站使用“ Git 仓库”(类似 github )来管理代码.其操作原理在于:利用 git 服务,将本地的项目目录下的文件同 ...
- IIS 启用w3wp.exe调试 没有找到w3wp进程
必须条件: 在进程列表的下面,有个show processes in all sessions,把它勾上就能看到了 . VS中附加进程的方式调试IIS页面,以及设置断点无效问题解决 以前调试网站的时候 ...
- PHP 文件上传全攻略
PHP文件上传功能一般都是大家使用事先封装好的函数,要用的时候直接使用已封装的函数就完了,但有时候不能使用封装函数,还真不大能记住PHP的上传相关的东西,在此做个总结,以备后用. 1.表单部分 允 ...
- spring mvc redirect设置FlashAttribute
在Controller中设置: @RequestMapping("/redir") public String redir(Model model, RedirectAttribu ...
- use strict 的优点
JavaScript严格模式详解 http://blog.csdn.net/airingyuan/article/details/25036297 http://ourjs.com/detail/52 ...
- QJsonObject和QJsonArray的巨坑
最近用Qt的QJsonObject和QJsonArray当做类变量来存储运行信息,发现这两货真的是巨坑.让人有一种JJ fly的感觉/(ㄒoㄒ)/~~. 写了个例子来说明下: MainWindow:: ...
- VS2013使用WebDeploy发布网站到IIS服务器
VS2013用Web Deploy方式发布网站到IIS服务器发布文档 VS版本:VS2013 服务器版本:Windows Server 2012 R2 IIS版本:IIS8.0 Web Deploy版 ...