所谓计算样式，就是嵌入式样式、外部样式表、内联样式综合的样式表现，那么如何来获取呢？

“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高程里还有另外一个方法，去获取样式表的内容，然后一个个去调用样式表，去改，但是我觉得太麻烦了，要学的去翻书哦~

参考资料：

JavaScript高级程序设计-第3版

js访问CSS最终计算样式的更多相关文章

  1. js获取css的各种样式并且设置他们

    js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设 ...

  2. js获取css中的样式

    众所周知,obj.style只能够获取 <div id="a" style="width:100px;"></div> 结构上的样式 如 ...

  3. JS获得css样式即获得元素的计算样式（《Javascript精粹修订版》书摘）

    为HTML文档中的元素指定样式可以有3种方法:使用内嵌样式.在页面的head中对Style进行声明以及外部 CSS 文件.元素的视觉效果往往是由上述3种方式的结合或者其中某一种方式来确定的,但是内嵌样 ...

  4. 深入理解脚本化CSS系列第二篇——查询计算样式

    × 目录 [1]getComputedStyle [2]注意事项 [3]currentStyle[4]IE 前面的话 元素的渲染结果是多个CSS样式博弈后的最终结果,这也是CSS中的C(cascade ...

  5. 用原生JS读写CSS样式的方法总结

    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了!   一.可以通过DOM节点对象的style对象(即CSSStyleDe ...

  6. 用JS控制CSS基本样式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...

  7. js操作css样式，null和undefined的区别？

    1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...

  8. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  9. 11-13 js操作css样式

    1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...

随机推荐

  1. Js/jQuery实时监听输入框值变化

    前言 在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能 ...

  2. C语言的工具集

    1. lint可以对c程序进行更加广泛的错误分析,lint不是缩写,它的命名是因为它像在程序中“吹毛求疵”,现在许多linux发行版都包括了它的增强版splint(Secure Programming ...

  3. ZOJ 2610 Puzzle 模拟

    大模拟:枚举6个方向.检查每一个0是否能移动 Puzzle Time Limit: 2 Seconds      Memory Limit: 65536 KB Little Georgie likes ...

  4. MySQL 使用 SSL 连接(附 Docker 例子)

    查看是否支持 SSL 首先在 MySQL 上执行如下命令, 查询是否 MySQL 支持 SSL: mysql> SHOW VARIABLES LIKE 'have_ssl'; +-------- ...

  5. WPF集合

    Dependency Property 依赖属性 http://www.cnblogs.com/HelloMyWorld/archive/2013/02/21/2920149.html Attache ...

  6. C语言 · 逆序排列

    算法提高 逆序排列   时间限制:1.0s   内存限制:512.0MB      问题描述 编写一个程序,读入一组整数(不超过20个),并把它们保存在一个整型数组中.当用户输入0时,表示输入结束.然 ...

  7. 解决 Python.h：没有那个文件或目录 错误的方法

    http://www.cnblogs.com/yuxc/archive/2012/05/13/2498019.html ———————————————————————————————————————— ...

  8. Oracle字符串分割Split（超简单一条sql解决）

    ) FROM renyuan where name ='张三' 解决如下问题 我现在有一个字段是存:,,3的,而它对应另一张值集表中.eg; 课程人员表 renyuan id name Course ...

  9. 第二百四十七节，Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一．按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...

  10. MyBatis学习4---使用MyBatis_Generator生成Dto、Dao、Mapping

    由于MyBatis属于一种半自动的ORM框架,所以主要的工作将是书写Mapping映射文件,但是由于手写映射文件很容易出错,所以查资料发现有现成的工具可以自动生成底层模型类.Dao接口类甚至Mappi ...