在javascript中佔用怪癖模式的元素的寬度？

我一直在掃描所有流行的js庫，但我找不到一個具有寬度函數的DOM元素，它實際上是Internet Explorer中的怪癖模式的帳戶。問題是填充和邊框在怪異模式被佔用時沒有被計算在寬度中。據我可以告訴這種情況時doctype被遺漏或doctype被設置爲HTML 3.2。在javascript中佔用怪癖模式的元素的寬度？

很明顯，我可以將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（即）

提前感謝！

來源

2008-10-21 christoff

@ 1

document.compatMode

「CSS1Compat」是指「標準模式」和「BackCompat」是指「怪異模式」。

@一個HTML元素的2

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怪異模式的寬度必須檢查繪製模式，然後添加邊界，並填充到寬度A的功能;

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

來源

2008-10-21 13:34:45 pawel

哪裏的currentStyle屬性從何而來？我試圖在ff中，它似乎是未定義的 – christoff 2008-10-22 05:14:18

這個圖書館可能是在說真話。問題不在於閱讀是不正確的，而是顯示不正確。作爲一個例子嘗試：

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

然後嘗試改變DIV中的文本，看看發生了什麼。 IE將顯示各種值，具體取決於FF中正確顯示的文本。 IE試圖將100px +的東西填充到100px空間中，並得到各種結果。

對於width：.width和.outerWidth，jQuery有兩種方法。 .outerWidth將返回元素的全部寬度。它也有方法可行得到所有其他屬性（填充，邊框等）：在波紋管的例子：

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

來源

2008-10-21 10:31:22 Aleris

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.'); 
    } 
})();

該代碼將檢測模式爲您服務。

如果ANYING，但doctype在第一行，IE也會進入怪癖模式。即使是第二行中帶有doctype的空白第一行也會導致怪異模式。

來源

2008-10-21 12:49:17

在javascript中佔用怪癖模式的元素的寬度？

回答

相關問題