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的更多相关文章

  1. 获取css样式，style、getComputedStyle及currentStyle的区别

    样式表有三种: 内嵌样式:<div id="box" style="color:red">box</div>,style写在html中的 ...

  2. getComputedStyle(and currentStyle)

    1.getComputedStyle 1.1 用法: currentStyle获取计算后的样式,也叫当前样式.最终样式.优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样 ...

  3. getComputedStyle和currentStyle

    /*alert(div.style.width)*/ //null function getstyle(obj,name){ if(obj.currentStyle) { return obj.cur ...

  4. getComputedStyle与currentStyle

    currentStyle:获取计算后的样式.也叫当前样式.终于样式. 长处:能够获取元素的终于样式.包含浏览器的默认值,而不像style仅仅能获取行间样式.所以更经常使用到. 注意:不能获取复合样式如 ...

  5. getComputedStyle与currentStyle获取样式(style/class)

    今天看jQuery源码CSS部分,里面用到了currentStyle和getComputedStyle来获取外部样式. 因为elem.style.width只能获取elem的style属性里的样式,无 ...

  6. getComputedStyle与currentStyle获取样式

    转载自:https://segmentfault.com/a/1190000007477785 CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里 ...

  7. JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...

  8. JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题

    1. getComputedStyle()  方法获取到的是经过计算机/浏览器计算后的样式 getComputedStyle($("#div")).width; 兼容性:IE6 7 ...

  9. getComputedStyle与currentStyle获取元素当前的css样式

    CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里面的,内部样式只对所在的网页有效外部样式表:如果很多网页需要用到同样的样式,将样式写在一个以.c ...

随机推荐

  1. 【bzoj1066】[SCOI2007]蜥蜴 网络最大流

    [bzoj1066][SCOI2007]蜥蜴 Description 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的 ...

  2. oracle和mssql中复制表的比较

    库内数据复制MS SQL Server: Insert into 复制表名称 select 语句 (复制表已经存在)select 字段列表 into 复制表名称 from 表 (复制表不存在) Ora ...

  3. js:语言精髓笔记1--标识符与基本类型

    标识符: 命名: 语法以及类型----语法关键字                                           //逻辑 值(的存储位置)----变量和常量           ...

  4. 计算1至n中数字X出现的次数

    描述 计算 1 至 n 中数字 X 出现的次数,其中 $n \ge 1,X \in [0,9]$. 解题思路 这是一道比较简单的题目,举个例子先:假设 $n=11, X=1$,那么就是求 1, 2, ...

  5. POJ1659 Frogs' Neighborhood（Havel定理）

    给一个无向图的度序列判定是否可图化,并求方案: 可图化的判定:d1+d2+……dn=0(mod 2).关于具体图的构造,我们可以简单地把奇数度的点配对,剩下的全部搞成自环. 可简单图化的判定(Have ...

  6. BZOJ3839 : [Pa2013]Działka

    对于每个询问,首先可以通过扫描线+线段树求出四个方向的第一个点,询问范围等价于框住这些点的最小矩形. 对于一个点$i$,预处理出: $A[i][j]$:$i$往左下角按凸壳走到$j$时,凸壳上相邻两点 ...

  7. 数据库操作sql【转】

    Student(S#,Sname,Sage,Ssex) 学生表Course(C#,Cname,T#) 课程表SC(S#,C#,score) 成绩表Teacher(T#,Tname) 教师表 问题:1. ...

  8. 转：10条建议让你创建更好的jQuery插件

    在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了.使 ...

  9. 【BZOJ】2038: [2009国家集训队]小Z的袜子(hose)（组合计数+概率+莫队算法+分块）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2038 学了下莫队,挺神的orzzzz 首先推公式的话很简单吧... 看的题解是从http://for ...

  10. 基于nginx tomcat redis分布式web应用的session共享配置

    一.前言 nginx 作为目前最流行的开源反向代理HTTP Server,用于实现资源缓存.web server负载均衡等功能,由于其轻量级.高性能.高可靠等特点在互联网项目中有着非常普遍的应用,相关 ...