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属性,跟实际项目是不符. ...
随机推荐
- c3p0数据库连接池管理
之前已经讲过dbcp可以用于数据库连接池进行管理.另一种技术c3p0也可以用于数据库连接池管理,其中Spring等框架都是基于c3p0技术进行数据库连接池管理的. 使用之前需要引入 c3p0-0.9. ...
- java同一个实体的复制
import org.springframework.beans.BeanUtils; //将mon的值复制给monitorCommission;monitorCommission是实体Monitor ...
- JavaScript身份证正则表达式,querySelector通过name获取元素,php正则表达式
var preg_sfz1 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3 ...
- HTML中css和js链接中的版本号
背景 在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候, 浏览器 ...
- atitit.产品console 日志的aticonsole 方案处理总结
atitit.产品console 日志的aticonsole 方案处理总结 1. 主要原理流程 1 2. 调用代码 1 3. 内部主要实现 1 3.1. 放入消息 1 3.2. 读取消息 2 默认可以 ...
- 102. Linked List Cycle【medium】
Given a linked list, determine if it has a cycle in it. Example Given -21->10->4->5, tail ...
- form之action的绝对路径与相对路径
1.当你的form要提交到你自己的站点之外的URL的时候,就采取绝对路径: <form action="http://www.xxx.yyy:zzzz/mmm/nn/kkk.jsp&q ...
- Django接受ajax传过来的数组
$.ajax({ cache: false, type: "POST", url: "/userdelete/", traditional:true, //加上 ...
- lua字符串对齐函数
最近要用到字符串对齐,开始只是一部分字符串,就直接加空格了,后来发现有很多, 于是写了个字符串对齐的函数. --功能:分割字符串 --参数:带分割字符串,分隔符 --返回:字符串表 function ...
- HTML中label的两种使用方法
如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上. 有两种使用方法: 方法1: <label for=" ...