getComputedStyle与currentStyle

currentStyle:获取计算后的样式,也叫当前样式、最终样式。

优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到。

注意:不能获取复合样式如background属性值,只能获取单一样式如background-color等。

alert (oAbc.currentStyle);

非常遗憾的是,这个好使的东西也不能被各大浏览器完美地支持。准确地说,在我测试的浏览器中,IE8和Opera 11弹出了“object CSSStyleDeclaration”;FF 12、chrome 14、safari 5则弹出“undefined”。

虽然currentStyle无法适用于所有浏览器,但是可以根据以上测试的结果来区分开支持、不支持的浏览器,然后再找到兼容的写法。

var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
	//IE、Opera
	alert("我支持currentStyle");
} else {
	//FF、chrome、safari
	alert("我不支持currentStyle");
}

其实在FF浏览器中我们可以使用getComputedStyle(obj,false)来达到与IE下currentStyle相同的效果。

getComputedStyle(obj,false):在FF新版本中只需要第一个参数,即操作对象,第二个参数写“false”也是大家通用的写法,目的是为了兼容老版本的火狐浏览器。

兼容写法:

var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
	//IE、Opera
	//alert("我支持currentStyle");
	alert(oAbc.currentStyle.width);
} else {
	//FF、chrome、safari
	//alert("我不支持currentStyle");
	alert(getComputedStyle(oAbc,false).width);
}

一个空白页面中body的id=”abc”,测试以上代码,IE和Opera弹出“auto”,其它三款浏览器则弹出“***px”。虽然结果不同,但是可以发现chrome和safari也都和火狐一样,顺利地读取到了属性值。不支持currentStyle的三款浏览器(FF、chrome、safari),都是支持getComputedStyle的。

结果表明:对浏览器是否支持currentStyle的判断 + getComputedStyle,就可以做到兼容各主流浏览器的效果。而且兼容写法并不复杂,你掌握了吗?^_^

支持currentStyle:IE、Opera

支持getComputedStyle:FireFox、Chrome、Safari

注意最后的弹出内容,currentStyle返回浏览器的默认值”auto”,而getComputedStyle则返回具体的值”**px”。这应该是两者的一个小差异,有兴趣的童鞋可以一起交流研究下。

http://www.mming.cc/blog/?p=549

时间: 2024-10-03 23:56:20

getComputedStyle与currentStyle的相关文章

获取css样式,style、getComputedStyle及currentStyle的区别

样式表有三种: 内嵌样式:<div id="box" style="color:red">box</div>,style写在html中的为内嵌样式: 内联样式: <style> #box{    font-size: 25px;    background-color: #ccc; } </style> 在html页中直接写入<style></style>的为内联样式: 外部样式:<lin

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

大家都知道,用document.getElementById(‘element').style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属性引用的外部样式表,就拿不到我们要的信息了. DOM标准里有个全局方法getComputedStyle,可以获取到当前对象样式规则信息,如:getComputedStyle(obj,null).paddingLeft,就能获取到对象的左内边距.但是事情还没完,万恶的IE不支持此方法,它有自己的一个实

getComputedStyle和currentStyle

1 /*alert(div.style.width)*/ //null 2 3 function getstyle(obj,name){ 4 if(obj.currentStyle) { 5 return obj.currentStyle[name]; 6 } else { 7 return getComputedStyle(obj,null)[name]; 8 } 9 } 10 alert(getstyle(div,'width')) 11 } 兼容ie 和非ie浏览器的获取样式写法 : zI

getComputedStyle与currentStyle的区别

先看个例子 <!DOCTYPE html> <html lang="en"> <script src="miaov.js"></script> <head> <meta charset="UTF-8"> <title>return返回值</title> <style> #div1{ width:50px; height:50px; back

getComputedStyle(and currentStyle)

1.getComputedStyle 1.1 用法: currentStyle获取计算后的样式,也叫当前样式.最终样式.优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如background属性值,只能获取单一样式如background-color等. currentStyle 在ie.opera上是可行的,无法适用于所有浏览器的getComputedStyle( obj , false ) 是支持 w3c (FF12.ch

currentstyle 和 getComputedStyle—JS学习笔记2015-6-17(第59天)

getComputedStyle 和 currentStyle 获得到的是计算机(浏览器)计算后的样子: ie8 以及更早ie浏览器,无法兼容该方法: 可以使用currentStyle  // 不过标准浏览器下却不兼容: 这两种方法的适用范围和注意事项(以后会有解决方案,比如正则, 学东西不要死板): 复合样式获取不到,会有兼容性问题,比如:background 想到得到背景颜色, 应该是backgroundColor 获取单一样式,而不要获取复合样式 不要有空格: 不要获取未设置后的样式:不兼

getComputedStyle currentStyle 获取当前元素所有最终使用的CSS属性值

object.getComputedStyle  获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象,只读,不能设置. 此方法不兼容IE8及以下,需用currentStyle方法. function getStyle(obj.attr){ return getComputedStyle(obj)?getComputedStyle(obj)[attr]:obj.currentStyle[attr]; //判断是否有getComputedStyle方法 } obj为需要获取属性值

style currentStyle getComputedStyle的区别和用法

先介绍下层叠样式表的三种形式: 1.内联样式,在html标签中style属性设置. <p style="color:#f90">内联样式</p> 2.嵌入样式,通过在head标签设置style标签添加样式. <style type="text/css"> .stuff{color:#f90;} </style> 3.外部样式,通过link标签引入外部样式 <link type="text/css&quo

js中style,currentStyle和getComputedStyle的区别以及获取css操作方法

一.style,currentStyle和getComputedStyle的区别 <script>  function getStyle(obj, attr)   {       if(obj.currentStyle)       {          return obj.currentStyle[attr];  //只适用于IE     }       else       {          return getComputedStyle(obj,false)[attr];   //