javascript中怪癖模式的元素宽度？答案

【问题标题】：Width of an element accounting for quirks mode in javascript?javascript中怪癖模式的元素宽度？
【发布时间】：2010-09-18 06:57:54
【问题描述】：

我一直在浏览所有流行的 js 库，但我找不到一个具有 DOM 元素宽度函数的 DOM 元素，它实际上解释了 Internet Explorer 中的 quirks 模式。问题是当使用 quirks 模式时，填充和边框不计入宽度。据我所知，当文档类型被忽略或文档类型设置为 html 3.2 时会发生这种情况。

显然我可以将 doctype 设置为符合标准的东西，但是这个脚本可以嵌入到任何地方，所以我无法控制 doctype。

将问题分解为更小的部分：

1) 如何检测怪癖模式？ 2) 从元素中提取边框和填充以进行补偿的最佳方法是什么？

原型示例：

<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>

结果：

253 (ff) 250（即）

提前致谢！

【问题讨论】：

标签： javascript html css

【解决方案1】：

document.compatMode

“CSS1Compat”表示“标准模式”，“BackCompat”表示“怪癖模式”。

HTML 元素的 offsetWidth 属性给出了它在屏幕上的宽度，以像素为单位。

<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 宽度的函数必须检查渲染模式，然后为宽度添加边框和填充；

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 );

【讨论】：

currentStyle 属性从何而来？我正在 ff 中尝试它，它似乎是未定义的
currentStyle 是 IE 的 getComputedStyle() 版本。它返回给定 CSS 属性的实际值。您可以在 PPK 的文章中阅读更多内容：quirksmode.org/dom/getstyles.html
有了 Prototype，你也可以使用 Element.getStyle()。

【解决方案2】：

javascript:(function(){
    var mode=document.compatmode,m;if(mode){
        if(mode=='BackCompat')m='quirks';
        else if(mode=='CSS1Compat')m='Standard';
        else m='Almost Standard';
        alert('The page is rendering in '+m+' mode.');
    }
})();

该代码将为您检测模式。

如果除了 doctype 之外的任何内容在第一行，IE 也会进入怪癖模式。即使是第二行带有 doctype 的空白第一行也会导致怪癖模式。

【讨论】：

【解决方案3】：

图书馆可能说的是真的。问题不在于读数不正确，而在于实际显示不正确。举个例子试试：

<div id="mydiv" style="width: 100px; border-left: 100px black solid;">&nbsp;</div>

然后尝试更改 div 中的文本以查看发生了什么。 IE 会根据里面的文本显示不同的值，而 FF 会正确显示。 IE 正在尝试将 100px + 的东西填充到 100px 的空间中，并产生各种结果。

jQuery 有两种宽度方法：.width 和 .outerWidth。 .outerWidth 将返回元素的全宽。它还可以获取所有其他属性（填充、边框等），如下例所示：

$(document).ready(function() {
    alert("width=" + $('#mydiv').width() 
    + " outerWidth=" + $('#mydiv').outerWidth() 
    + " borderLeftWidth=" + $('#mydiv').css("borderLeftWidth"))
});

【讨论】：