js访问CSS最终计算样式
所谓计算样式，就是嵌入式样式、外部样式表、内联样式综合的样式表现，那么如何来获取呢？
“DOM2 级样式”增强了document.defaultView，提供了getComputedStyle()方法，可以调用最终的样式。
这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例 如":after"）。如果不需要伪元素信息，第二个参数可以是null。
getComputedStyle()方法返回一 个CSSStyleDeclaration 对象（与style 属性的类型相同），其中包含当前元素的所有计算的样式。
以下面这个HTML 页面为例:
<!DOCTYPE html>
<html>
<head>
<title>Computed Styles Example</title>
<style type="text/css">
#myDiv {
background-color: blue;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<div id="myDiv" style="background-color: red; border: 1px solid black"></div>
</body>
</html>
js:
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); // "red"，不是blue
后面就可以通过 computedStyle 来访问最终的样式了！
但是，边框属性可能 会也可能不会返回样式表中实际的border 规则（Opera 会返回，但其他浏览器不会）。存在这个差别的原因是不同浏览器解释综合（rollup）属性（如border）的方式不同，因为设置这种属性实际上会涉及 很多其他属性。在设置 border 时， 实际上是设置了四个边的边框宽度、颜色、样式属性（ border-left-width 、border-top-color 、border-bottom-style ，等等）。因此， 即使 computedStyle.border 不会在所有浏览器中都返回值，但computedStyle.borderLeftWidth 会返回值！
但是！IE9之前版本不支持 getComputedStyle() 方法;
在IE 中，每个具有style 属性的元素还有一个 currentStyle 属性。这个属性是CSSStyleDeclaration 的实例，包含当前元素全 部计算后
的样式。取得这些样式的方式也差不多，如下面的例子所示。
var myDiv = document.getElementById("myDiv");
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor); //"red"
所以兼容下IE9之前版本，代码就是这个样子：
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView?document.defaultView.getComputedStyle(myDiv, null):myDiv.currentStyle;
alert(computedStyle.backgroundColor); // "red"，不是blue
当然除了这个方法，js高程里还有另外一个方法，去获取样式表的内容，然后一个个去调用样式表，去改，但是我觉得太麻烦了，要学的去翻书哦~
参考资料：
js访问CSS最终计算样式的更多相关文章
- js获取css的各种样式并且设置他们
js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设 ...
- js获取css中的样式
众所周知,obj.style只能够获取 <div id="a" style="width:100px;"></div> 结构上的样式 如 ...
- JS获得css样式即获得元素的计算样式（《Javascript精粹修订版》书摘）
为HTML文档中的元素指定样式可以有3种方法:使用内嵌样式.在页面的head中对Style进行声明以及外部 CSS 文件.元素的视觉效果往往是由上述3种方式的结合或者其中某一种方式来确定的,但是内嵌样 ...
- 深入理解脚本化CSS系列第二篇——查询计算样式
× 目录 [1]getComputedStyle [2]注意事项 [3]currentStyle[4]IE 前面的话 元素的渲染结果是多个CSS样式博弈后的最终结果,这也是CSS中的C(cascade ...
- 用原生JS读写CSS样式的方法总结
为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDe ...
- 用JS控制CSS基本样式
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...
- js操作css样式，null和undefined的区别？
1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...
- js动态改变css伪类样式
首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...
- 11-13 js操作css样式
1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...
随机推荐
- Java 枚举(enum) 的常见用法和开发规范
JDK1.5引入了新的类型——枚举.在 Java 中它虽然算个“小”功能,却给我的开发带来了“大”方便. 用法一:常量 在JDK1.5 之前,我们定义常量都是: public static final ...
- Docker搭建本地私有仓库
安装部署一个私有的Docker Registry是引入.学习和使用Docker这门技术的必经之路之一.尤其是当Docker被所在组织接受,更多人.项目和产品开始接触和使用Docker时,存储和分发自制 ...
- Mysql对结果集的各种处理操作
c++操作- 查询mysql结果集 用mysql进行数据查询的时候,mysql会返回一个结果集给我们.接着我们需要调用mysql的api,从这个结果集中取得我们要的数据. 取完数据之后,需要释放这个结 ...
- atitit.软件gui按钮and面板---os区-----软链接,快捷方式
atitit.软件gui按钮and面板---os区-----软链接,快捷方式 1. 硬链接 1 2. 二.软链接(符号链接)LN 1 3. 三.删除链接 2 4. 区别 2 5. 参考 3 1. 硬链 ...
- 重装windows导致grub损坏
本人一块磁盘第7分区装linux,第一分区先装xp,后重装为windows8.1后,发现grub引导没了,直接进了windows,解决办法如下: 1.LiveCD进入系统,打开shell 2.输入sh ...
- JqERY
//下拉菜单样式 /*查找全部select的下拉菜单*/ function getElemsById(cot_val){ return document.getElementById(cot_val) ...
- 解决The markup in the document following the root element must be well-formed.
出现问题的代码: <security-constraint> <web-resource-collection> <web-resource-name>Regist ...
- Ubuntu 文件文件夹查看权限和设置权限
ubuntu下查看权限的命令为: ls -l filename ls -ld folder ubuntu下设置权限的命令为: 一共有10位数 其中: 最前面那个 - 代表的是类型 中间那三个 rw- ...
- love2d杂记9--光照效果
光照效果需要用shader,这个我一直没学,现在时间较少,先放到这里,有时间我再补,如果大家 发现好的opengl shader教程(如果没记错的love2d用的是glsl 1.1),推荐一下. 这里 ...
- PCB封装技术
TQFP(thin quad flat package,即薄塑封四角扁平封装)薄四方扁平封装低成本,低高度引线框封装方案. MLF(MicroLeadFrame),MLF接近于芯片级封装(Chip S ...