getComputedStyle_currentStyle_使用和其中的兼容问题
2017-03-12 19:45

 在上一篇文章中,我们提到了获取DOM元素最终样式的兼容方法:getComputedStyle,currentStyle。今天我们来详细分析这两个方法的使用,以及其中所涉及的部分兼容问题。水平有限,能力一般,有说的不对的地方还望海涵。

 根据jQuery的源码,我先提炼出这两个方法的简单代码如下:

var getStyles,curCss;
	if(window.getComputedStyle){
		getStyles=function(elm){
			return elm.ownerDocument.defaultView.getComputedStyle(elm,null);
		};
		curCss=function(elm,name){
			var computed=getStyles(elm);
			return computed.getPropertyValue(name);
		}
	}else{
		getStyles=function(elm){
			return elm.currentStyle;
		};
		curCss=function(elm,name){
			var computed=getStyles(elm);
			return computed[name];
		}
	}

通过这个代码我们得到一个curCss方法,下面我们在页面中找到一个div进行实验

<div id='demo'>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>forth</li>
    </ul>
</div>

这段html的div虽然我们没有设置高度,但他在页面中是确确实实有高度的,我们就通过上面的方法来获取div的高度。

var dm=document.getElementById("demo");
var ht=curCss(dm,"height");
console.log(ht);

Chrome下的运行结果:

FireFox下的运行结果:

IE9+的运行结果

IE8-的运行结果

IE9+支持的getComputedStyle方法,如果用currentStyle方法IE9+得到的也是“auto”结果,当然这是对于我们没有明确用css或者style给div定义高度的情况下。而如果我们是想在这种情况下得到div的准确高度,那么兼容IE8的话就需要对“auto”进行处理了。

这里我们就需要判断返回的值如果是auto的话,就需要用offsetHeight(offsetWidth)进行处理得到具体的数值了(jQuery内部也是这么处理的)。

curCss=function(elm,name){
	var computed=getStyles(elm);
	var val=computed[name];
	if(val=="auto"){
		switch(name){
			case "width":val=elm.offsetWidth+"px";break;
			case "height":val=elm.offsetHeight+"px";break;
			}
		}
	return val;
	}


我们通过以上修改来使方法能正确获得width和height的值。

但是如果我们设置了div的宽度和高度,并且是使用了诸如pt,em,%的单位,那么IE8以下返回的数值也是这个单位数值,并不是我们想要的px数值,这个还得需要我们进行处理,这个就不细说了。

 如果是获取元素的font-size:3em|,在IE8-同样有单位问题,juqery采用了一种很巧妙的方法来实现:

// 储存原始值
left = style.left;
rs = elem.runtimeStyle;
rsLeft = rs && rs.left;

//设置新值,用runtimeStyle保持有定位的dom元素位置不变后再用style的pixelLeft进行单位转换
if ( rsLeft ) {
	rs.left = elem.currentStyle.left;
}
style.left = name === "fontSize" ? "1em" : ret;
ret = style.pixelLeft + "px";

//回复原始值
style.left = left;
if ( rsLeft ) {
	rs.left = rsLeft;
}

jquery对于font-size或者其他样式值得到的单位不是px的处理方式,先将元素原来的left值保存,然后设置元素的left值为ret或1em;然后得到元素的pixelLeft(只有IE支持此属性)的px值,这就完成了em,百分比等到px单位数值的转换。返回ret就是font-size等样式的px值。这里要提一点,虽然left对于非relative,absolute,fixed的元素在展现上不起作用,但是他能设置成功,并且通过pixelLeft可以得到其对应的px值。

至于runtimeStyle也是IE特有的属性,不同步到style上,修改他展现更快,而且在和style,currentStyle比,优先级更高;jquery就是利用这一点。比如一个div是absolute定位的,并且他有left值,这个时候我们修改改他的left值为ret或1em(fontSize单位太多,用1em表示一个文字的宽度大小),如果浏览器运行慢,那么就会出现div的位置跳动,jquery这么做是将原来的位置设置到最高优先级的runtimeStyle,之后在通过style转换em和px的数值,这个时候由于runtimeStyle还是原来的left值,div不会变动,得到数值转换后,再将原来存储的值回复过来。这个必须得恢复,不然在得到fontSize等px单位转换值后,在用jquery或者js操作style属性的left,div的位置依然不会变动。

    getComputedStyle和currentStyle的介绍就写到这里,至于里面的一些对于低版本firefox,chrome等的兼容就不需要考虑了,因为这些浏览器升级很方便,只能最近的两三个版本能运行就能保证大部分人的浏览器都能运行。



原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2942)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1