根据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的宽度是什么都没有，为什么？

回答

相关问题