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

原文地址:https://www.cnblogs.com/mengfanrong/p/5189025.html