var getWidth = function(el){
if(isQuirk){
return el.offsetWidth
}else{
return el.clientWidth - parseFloat(getStyle(el, "padding-left"))- parseFloat(getStyle(el, "padding-right"))
}
}
对比一下Ext的实现(只抠出核心部分)：
复制代码 代码如下:
getWidth : function(contentWidth){
var me = this,
dom = me.dom,
w = MATH.max(dom.offsetWidth, dom.clientWidth) || 0;
w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
return w < 0 ? 0 : w;
},
非常危险的做法，比Prototype的实现还差劲，因此它就不得在其他部分进行纠正，这就是为什么它的UI体积如此庞大的缘故，从侧面也突现JQuery实现手法的高超。不过JQuery的实现了也是相当复杂，如果本元素无法取得精确值，就从上级元素着手，这个遍历消耗非常严重。其中还借用了Dean Edwards的一个伟大的hack:
复制代码 代码如下:
var convertPixelValue = function(el, value){
var style = el.style,left = style.left,rsLeft = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
style.left = value || 0;
var px = style.pixelLeft;
style.left = left;
el.runtimeStyle.left = rsLeft;
return px;
}
//此函数由Dean Edwards提供的，最早出处见下面链接
// #comment-102291
//注意，第二参数必须是带单位的数值，如em', 'ex', 'cm', 'mm', 'in', 'pt', 'pc'
//百分比好像有点问题
//另，不要试图用于IE以外的浏览器
//用法：convertPixelValue($("drag4"),'10em')
var convertPixelValue = function(el, styleVal){
//保存原来的值到left与rsLeft
var style = el.style,left = style.left,rsLeft = el.runtimeStyle.left;
//下面这步是关键，
//把el.currentStyle.left代入到el.runtimeStyle.left中，激活hack
el.runtimeStyle.left = el.currentStyle.left;
//把非px单位的数值代入style.left中，如10em
style.left = styleVal || 0;
//一定要用style.pixelLeft去取，要不数值是不准确
//如果我们用style.pixelLeft会得160，用style.left会得到150px
//如果都已转换好，但style.left是不准确的。
var px = style.pixelLeft;
style.left = left;//还原数据
el.runtimeStyle.left = rsLeft;//还原数据
return px;
}
这个hack是用于将em、pc、pt、cm、in、ex等单位转换为px的，当然不包括百分比。
再回来看我的getWidth函数，主要问题是获取padding-left与padding-right的值。在标准浏览器，我们用getComputedStyle可以轻而易举地获取经过转换的精确值，单位为px。在IE中，如果你给它的值为2em，它就返回2em，很懒。在《CSS的inherit与auto》一文，我也指出了，padding为non-inherited property，这就不用处理inhert这个无厘头的值；在auto列表中，padding也不在列，减少了处理auto这个模糊值的风险；加之是可度量单位，各浏览器都很厚道地设置默认值为0px，换言之，我们需要的做的事是，当值的单位不为px，我们把它转换为px。我们把Dean Edwards的hack整合到我们的主函数getStyle中即可。如果padding-left是百分比，我们就取其父元素的width乘以百分比即可。总而言之，遍历的层次与数算的次数都被压缩最少。从这方面说，我在这方面的处理比JQuery优胜得多（JQuery连border，margin都列入计算范围，而border与margin在IE中存在模糊值，这就逼使JQuery动不动就往上计算父元素，换言之，需要重复计算其父元素的属性五次；我最多为三次，怪异模式下只需一次）。有时在IE中取得的值，比拥有getComputedStyle的火狐还精确（不过，好像精确过头，自己用toFixed调整精确度）。
复制代码 代码如下: