根據Javascript，DIV的寬度是什麼都沒有，爲什麼？

根據DOM的Javscript，DIV的寬度不算什麼。根據Javascript，DIV的寬度是什麼都沒有，爲什麼？

這是一個這麼簡單的小問題，但它很煩人。

<html> 
    <head> 
     <style> 
      div#foot_wrapper{ 
       width:650px; 
       height:20px; 
       position:absolute; 
       bottom:10px; 
       background-color:#000000; 
      } 
     </style> 
     <script> 

      function align(div){ 
           alert(div.style.width); // ---------------- box pops up blank? 
       div.style.left = (window.innerWidth/2) - (div.style.width/2);  
      } 
     </script> 

    </head> 

    <body onload="align(document.getElementById('foot_wrapper'))" onresize="align(document.getElementById('foot_wrapper'))" > 

     <div id="main"> 
     </div> 

     <div id="foot_wrapper"> 
     </div> 

    </body> 
</html>

來源

2012-01-12 user965369

嘗試div.offsetWidth^MDN，而不是div.style.width。

style^MDN屬性僅反映在元素上內聯設置的樣式（使用元素上的style屬性）。

又見Javascript - Get Style ^Quirksmode

（爲了達到最佳效果，你可以使用庫像jQuery。作者已經圍繞着可能的瀏覽器差異和怪癖的工作，所以你不會有處理這些。）

來源

2012-01-12 12:43:47 kapa

但是在較老的IE瀏覽器中不支持offsetWidth嗎？ – user965369 2012-01-12 12:55:17

即使在IE 5.5中也支持（http://www.quirksmode.org/dom/w3c_cssom.html#t34）。它最初是微軟的一件事。 – kapa 2012-01-12 12:56:37

我得到一個無效的參數錯誤？它在Chrome中的作品:) – user965369 2012-01-12 13:01:43

style屬性爲您提供直接指定給元素的樣式，而不是從樣式表應用的樣式或繼承的樣式。

來源

2012-01-12 12:44:02 Guffa

這是因爲style DOM屬性只包含內聯定義的CSS屬性。如果您使用<div style="width: 650px;">，您會看到正確的結果。對於尺寸，使用innerWidth/clientWidth，可以使用window.getComputedStyle()（現代瀏覽器）或currentStyle DOM屬性（IE < = 8）讀取其他屬性。兩者的表現有所不同 - 如果您使用width: 1em,getComputedStyle返回16px和currentStyle返回1em，但它應該足夠用於一些更簡單的任務。

來源

2012-01-12 12:45:39 duri

根據Javascript，DIV的寬度是什麼都沒有，爲什麼？

回答

相關問題