getComputedStyle()与currentStyle
getComputedStyle()与currentStyle计算元素样式
发表于 2011-10-27 由 admin
“DOM2级样式”增强了document.defaultView，提供了getComputedStyle()方法。这个方法接受 两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:after”）。如果不需要伪元素信息，第二个参数可以是null。 getComputerStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。以下面的HTML页 面为例：
<!DOCTYPE html><html><head><title>计算元素样式</title><style>#myDiv {
background-color:blue;
width:100px;
height:200px;}</style><body><divid="myDiv"style="background-color:red; border:1px solid black"></div><script>
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv,null);
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //在某些浏览器中是“1px solid black”</script></body></head></html>
边框属性可能也不会返回样式表中实际的border规则（Opera会返回，但其它浏览器不会）。存在这个差别的原因是不同浏览器解释综合属性的方 式不同，因为设置这种属性实际上会涉及很多其他的属性。在设置border时，实际上是设置了四个边的边框宽度、颜色、样式属性。因此，即使 computedStyle.border不会在所有浏览器中都返回值，但computedStyle.borderLeftWidth则会返回值。
需要注意的是，即使有些浏览器支持这种功能，但表示值的方式可能会有所区别。例如，Firefox和Safari会返回将所有颜色转换成RGB格式。因此，即使getComputedStyle()方法时，最好多在几种浏览器中测试一下。
IE不支持getComputedStyle()方法，但它有一种类似的概念。在IE中，每个具有style属性的元素还有一个 currentStyle属性。这个属性是CSSStyleDeclaration的实例，包含当前元素全部计算后的样式。取得这些样式的方法差不多，如 下：
var myDiv = document.getElementById("myDiv");var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor);//"red"
alert(computedStyle.width);//"100px"
alert(computedStyle.height);//"200px"
alert(computedStyle.border);//undefined
与DOM版本的方式一样，IE也没有返回border样式，因为这是一个综合属性。
getComputedStyle()与currentStyle的更多相关文章
- 获取css样式，style、getComputedStyle及currentStyle的区别
样式表有三种: 内嵌样式:<div id="box" style="color:red">box</div>,style写在html中的 ...
- getComputedStyle(and currentStyle)
1.getComputedStyle 1.1 用法: currentStyle获取计算后的样式,也叫当前样式.最终样式.优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样 ...
- getComputedStyle和currentStyle
/*alert(div.style.width)*/ //null function getstyle(obj,name){ if(obj.currentStyle) { return obj.cur ...
- getComputedStyle与currentStyle
currentStyle:获取计算后的样式.也叫当前样式.终于样式. 长处:能够获取元素的终于样式.包含浏览器的默认值,而不像style仅仅能获取行间样式.所以更经常使用到. 注意:不能获取复合样式如 ...
- getComputedStyle与currentStyle获取样式(style/class)
今天看jQuery源码CSS部分,里面用到了currentStyle和getComputedStyle来获取外部样式. 因为elem.style.width只能获取elem的style属性里的样式,无 ...
- getComputedStyle与currentStyle获取样式
转载自:https://segmentfault.com/a/1190000007477785 CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里 ...
- JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...
- JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题
1. getComputedStyle() 方法获取到的是经过计算机/浏览器计算后的样式 getComputedStyle($("#div")).width; 兼容性:IE6 7 ...
- getComputedStyle与currentStyle获取元素当前的css样式
CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里面的,内部样式只对所在的网页有效外部样式表:如果很多网页需要用到同样的样式,将样式写在一个以.c ...
随机推荐
- SQL2005备份数据库到远程服务器中
--打开高级设置EXEC sp_configure 'show advanced options', 1RECONFIGURE--打开xp_cmdshell扩展存储过程EXEC sp_configur ...
- WinForm点击按钮，访问百度
命名空间 using System.Diagnostics; button的click事件中写入如下 Process.Start("http://www.xxx.com"); 注: ...
- hdu2955
#include<bits/stdc++.h> using namespace std; struct Bank { double cau; int money; }bank[]; ]; ...
- ntpd时间同步 安装与配置
1,安装 yum -y install ntp vim /etc/ntp.conf 默认配置: driftfile /var/lib/ntp/drift restrict default kod no ...
- 字符串集合或字符串数组转换成json数组
字符串可以是List<String>类型的字符串集合,也可以是String[]类型的字符串数组,二者转换成JSON数组的方式没有什么不同.下面代码注意关键的部分即可(画红线部分). 1. ...
- 武林[HDU1107]
武林 Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...
- TYVJ P1016 装箱问题 Label：01背包 DP
做题记录:2016-08-15 23:07:04 背景 太原成成中学第2次模拟赛 第三道 描述 有一个箱子容量为v(正整数,o≤v≤20000),同时有n个物品(o≤n≤30),每个物品有一个体积 ( ...
- 【BZOJ】2435: [Noi2011]道路修建（树形dp）
http://www.lydsy.com/JudgeOnline/problem.php?id=2435 我怎么感觉那么水.. 坑的是,dfs会爆...好吧..用bfs.. //upd:我的智商也是醉 ...
- 【BZOJ】3781: 小B的询问（莫队算法）
http://www.lydsy.com/JudgeOnline/problem.php?id=3781 还能不能再裸点.. #include <cstdio> #include < ...
- jpeglib使用指南
您可以到http://www.ijg.org/网站下载libjpeg的源码, IJG JPEG Library就是jpeg压缩库,是以源码的形式提供给软件开发人员的,当然在软件包里也有编译好的库文件, ...