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属性,跟实际项目是不符. ...
随机推荐
- AutoFac文档11（转载）
目录 开始 Registering components 控制范围和生命周期 用模块结构化Autofac xml配置 与.net集成 深入理解Autofac 指导 关于 词汇表 元数据 Autofac ...
- Node.js验证码模块captchapng
captchapng是一个基于pnglib模块开发,数字型验证码模块.内置字体.全JavaScript无其它依赖.不像有的验证码需要依赖canvas或者是需要编译,而且captchapng使用起来简单 ...
- docker容器跑tomcat遇到的坑
使用docker容器跑tomcat,由于同一个宿主机上跑了多个容器,再加上宿主机本身跑了很多进程,导致系统总的进程数达到了8000+,而容器中tomcat的启动脚本中会调用自带的setenv.sh,在 ...
- CSplashScene类
#ifndef __TRANSITIONSCENE_H__ #define __TRANSITIONSCENE_H__ #include "GameFrameHead.h" cla ...
- Python删除列表中元素
Python中列表(list)是很常用的数据结构,删除列表中的元素有几种方法 列表的remove方法 lst = [1, 1, 3, 4] lst.remove(1) # lst->[1, 3, ...
- CentOS6.2下安装配置MySql
转自:Linux学习之CentOS(十三)--CentOS6.4下Mysql数据库的安装与配置 如果要在Linux上做j2ee开发,首先得搭建好j2ee的开发环境,包括了jdk.tomcat.ecli ...
- filebeat+kafka失败
filebeat端配置 #----------------------------- Kafka output -------------------------------- output.kafk ...
- CM本地Yum源的搭建
CM本地Yum源的搭建 以本地yum源安装CM5为例,解释本地yum源的安装和利用本地yum源安装CM5. Cloudera Manager 5(以下简称CM)默认采用在线安装的方式,给不能联互联网或 ...
- Bootstrap学习笔记（7）--轮播
说明: 1. 幻灯片效果,外面的div有个id="myppt",class="carousel slide"这个是有图片滑动效果,不加就是直接瞬间换图片,dat ...
- 微博excel数据清洗(Java版)
微博数据清洗(Java版) 原创 2013年12月10日 10:58:24 2979 大数据公益大学提供的一份数据,义务处理一下,原始数据是Excel,含有html标签,如下: 要求清洗掉html ...