在javascript中考虑怪异模式的元素的宽度？ [英] Width of an element accounting for quirks mode in javascript?
问题描述
我已经扫描所有流行的js库，但我找不到一个有一个宽度函数的DOM元素，实际上解释了Internet Explorer中的怪异模式。问题是，当使用怪异模式时，填充和边框不会被计入宽度。至于我可以告诉这种情况发生时，doctype被遗漏或者doctype被设置为html 3.2。
I've been scanning through all the popular js libraries, but I can't find one that has a width function for a DOM element that actually accounts for quirks mode in Internet Explorer. The issue is that padding and borders don't get counted in the the width when quirks mode is engaged. As far as I can tell this happens when the doctype is left out or the doctype is set to html 3.2.
显然，我可以设置doctype符合标准，但是这个脚本可以嵌入任何地方，因此我不能控制doctype。
Obviously I could just set the doctype to something standards compliant, but this script can be embedded anywhere so I don't have control over the doctype.
将问题分解成更小的部分：
To break the problem down into smaller parts:
1）如何检测怪癖模式？
2）从元素中提取边框和填充以补偿的最好方法是什么？
1) How do you detect quirks mode? 2) What's the best way to extract the border and padding from an element to compensate?
原型示例：
<html><head></head><body>
<div id="mydiv" style="width: 250px; pading-left: 1px; border: 2px black solid">hello</div>
<script>
alert($('mydiv').getWidth())
</script>
</body></html>
结果：
250（ie）
253 (ff) 250 (ie)
提前感谢！
推荐答案
p> @ 1
document.compatMode
CSS1Compat表示标准模式，BackCompat表示 quirks模式。
"CSS1Compat" means "standards mode" and "BackCompat" means "quirks mode".
@ 2
offsetWidth属性在屏幕上显示其宽度（以像素为单位）。
offsetWidth property of a HTML elements gives its width on screen, in pixels.
<div id="mydiv" style="width: 250px; padding-left: 1px; border: 2px black solid">hello</div>
document.getElementById('mydiv').offsetWidth
//255 (standards) 250 (quirks)
补偿IE quirksmode的宽度的函数必须检查渲染模式，然后在宽度上添加边框和填充;
A function that compensates the width for IE quirksmode has to check for the rendering mode then add borders and padding to the width;
function compensateWidth( el, targetWidth ){
var removeUnit = function( str ){
if( str.indexOf('px') ){
return str.replace('px','') * 1;
}
else { //because won't work for other units... one may wish to implement
return 0;
}
}
if(document.compatMode && document.compatMode=="BackCompat"){
if(targetWidth && el.offsetWidth < targetWidth){
el.style.width = targetWidth;
}
else if (el.currentStyle){
var borders = removeUnit(el.currentStyle['borderLeftWidth']) + removeUnit(el.currentStyle['borderRightWidth']);
var paddings = removeUnit(el.currentStyle['paddingLeft']) + removeUnit(el.currentStyle['paddingRight']);
el.style.width = el.offsetWidth + borders + paddings +'px';
}
}
}
是两种使用方式：
var div = document.getElementById('mydiv')
// will try to calculate target width, but won't be able to work with units other than px
compensateWidth( div );
//if you know what the width should be in standards mode
compensateWidth( div, 254 );
这篇关于在javascript中考虑怪异模式的元素的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
