getComputedStyle(and currentStyle)
1.getComputedStyle
1.1 用法：
currentStyle获取计算后的样式，也叫当前样式、最终样式。优点：可以获取元素的最终样式，包括浏览器的默认值，而不像style只能获取行间样式，所以更常用到。注意：不能获取复合样式如background属性值，只能获取单一样式如background-color等。
currentStyle 在ie、opera上是可行的，无法适用于所有浏览器的
getComputedStyle(
obj , false ) 是支持 w3c (FF12、chrome
14、safari)：在FF新版本中只需要第一个参数，即操作对象，第二个参数写“false”也是大家通用的写法，目的是为了兼容老版本的火狐浏览器。
function getStyle(obj, attr) {
//ie,ff
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj，false)[attr];
}
1.2 异常：
Window.getComputedStyle does not implement interface Element"
一般是由于传入的参数引起的：例如
//抖动的框框pro
function shakeFn()
{
var _this = this;
shake(_this, "left", function(){
shake(_this, "top");
});
}
尽量不要用this,用对象替代，至于为什么，，有时间再研究。
function shakeFn(el){
// var _this = this;
shake(el, "left", function(){
// shake(el, "top");
});
}
2.详解（http://blog.163.com/yx_xie2007/blog/static/1024642532011821103751157/）
Dom中getComputedStyle方法可用来获取元素中所有可用的css属性列表，以数组形式返回，并且是readonly的。IE中则用currentStyle代替。
语法：arr_style=window.getComputedStyle(elem_id,ov)
其中ov:伪元素，是否要获取伪元素属性值。如hover,active,link等属性。如果不想获取这些伪元素的属性值请填写为null。
一 个HTMLElement的style属性是一个可读可写的CSS2Properties对象，就好像CSSRule对象的style属性一样。不 过，Window.getComputedStyle() 的返回值是一个CSS2Properties对象，其属性是只读的。
什么是CSS2Properties 对象？具体参考：http://www.w3school.com.cn/xmldom/dom_css2properties.asp
当要读取具体某个css属性时必须使用getPropertyValue或getPropertyCSSValue。
至于getPropertyValue和getPropertyCSSValue有什么区别，getPropertyValue返回的是一个string，而getPropertyCSSValue返回的是一个CSS2Properties对象。可以参考：https://developer.mozilla.org/en/DOM/window.getComputedStyle
例如，下面两个getStyle的输出结果是一样的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试getPropertyCSSValue</title>
<style type="text/css">
#elem {
position:absolute;
top:200px;
left:100px;
height:100px;
}
</style>
<script type="text/javascript">
window.onload = function(){
getStyle();
}
/*function getStyle(){
var container = document.getElementById("elem");
var str = window.getComputedStyle(container,null).getPropertyValue("height");
document.getElementById("output").innerHTML = str;
}*/
/*function getStyle(){
var container = document.getElementById("elem");
var str = window.getComputedStyle(container,null).getPropertyCSSValue("top").cssText;
document.getElementById("output").innerHTML = str;
}*/
</script>
</head>
<body>
<div id="elem">dummy</div>
<div id="output"></div>
</body>
</html>
3.style、currentStyle、getComputedStyle区别介绍 （http://www.cnblogs.com/flyjs/archive/2012/02/20/2360502.html）
样式表有三种方式
内嵌样式（inline Style） ：是写在Tag里面的，内嵌样式只对所有的Tag有效。
内部样式（internal Style Sheet）：是写在HTML的里面的，内部样式只对所在的网页有效。
外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性，在JavaScript中，通过document.getElementById(id).style.XXX就可以获取到 XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。
解决方案：引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式,可能是由style属性指定的！
runtimeStyle 运行时的样式！如果与style的属性重叠，将覆盖style的属性！
currentStyle 指 style 和 runtimeStyle 的结合！ 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了（仅限IE） 如：document.getElementById("test").currentStyle.top
要兼容FF，就得需要getComputedStyle 出马了
注意: getComputedStyle是firefox中的， currentStyle是ie中的. 比如说
|
1
2
3
4
5
|
<style>#mydiv { width : 300px;}</style> |
则:
|
1
2
3
4
5
6
7
8
|
var mydiv = document.getElementById('mydiv');if(mydiv.currentStyle) { var width = mydiv.currentStyle['width']; alert('ie:' + width);} else if(window.getComputedStyle) { var width = window.getComputedStyle(mydiv , null)['width']; alert('firefox:' + width);} |
另外在FF下还可以通过下面的方式获取
|
1
2
|
document.defaultView.getComputedStyle(mydiv,null).width;window.getComputedStyle(mydiv , null).width; |
getComputedStyle(and currentStyle)的更多相关文章
- getComputedStyle()与currentStyle
getComputedStyle()与currentStyle计算元素样式 发表于 2011-10-27 由 admin “DOM2级样式”增强了document.defaultView,提供了get ...
- 获取css样式，style、getComputedStyle及currentStyle的区别
样式表有三种: 内嵌样式:<div id="box" style="color:red">box</div>,style写在html中的 ...
- 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 ...
随机推荐
- [FlashPlyaer] FP版本20.0.267对Win10的64位系统的不兼容问题
Win10近日推送了一个新的升级补丁KB3132372,它专门用来修复Adobe Flash Player里的安全漏洞.但是很多用户反映升级了这个补丁之后导致浏览器上网时出现崩溃.卡死.空白等现象,尤 ...
- 源码解读—LinkedList
学习了一下linkedList的源码,做下记录. java底层实现的是双向环链表,程序定义了一个header,来保存头结点,header.next指向最后一个节点(最后插入到),header.prev ...
- HTTP与HttpServlet
(1).HTTP协议 Web浏览器和服务器通过HTTP协议在Internet上发送和接收消息.HTTP是一种基于请求/响应模式的协议.客户端发送一个请求,服务器端返回对该请求响应. . (2).HTT ...
- jdk线程常见面试题
请编写一个多线程程序,实现两个线程,其中一个线程完成对某个对象int成员变量的增加操作,即每次加1,另一个线程完成对该对象成员变量的减操作,即每次减1,同时要保证该变量的值不会小于0,不会大于1,该变 ...
- Codeforces Round #218 (Div. 2) D. Vessels
D. Vessels time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...
- 翻译：深入 AngularUI Router
原文地址:http://www.ng-newsletter.com/posts/angular-ui-router.html ui-router: https://angular-ui.github. ...
- 文件的输出与载入之java操作
一.前言 学习java没多久,关键是没怎么系统学过.都是看别人的代码来学习的.今天就把一直以来让我头痛的java IO 的一些基本操作来记录下来,加深记忆. 二.java导入文件到内存中 首先放一个 ...
- 【CImg】三角形绘制算法实现
这周的CV基础练习是简单的图形绘制:比如说矩形.三角形和圆心什么的.会发现其实矩形和圆形的实现思路都很直白,矩形只需要确认两个对角坐标就可以了,圆心只需要确认圆心和半径,接着就是简单的遍历各个像素点判 ...
- 使用C#调用windows API入门
一:入门,直接从 C# 调用 DLL 导出 其实我们的议题应该叫做C#如何直接调用非托管代码,通常有2种方法: 1． 直接调用从 DLL 导出的函数. 2． 调用 COM 对象上的接口方法 我 ...
- mysql中data_format用法
date_format(date,format)可以把日期转换为制定的格式: mysql> select date_format('2008-08-08 22:23:00', '%W %M %Y ...