element.style顯示不正確的信息

有一個簡單的HTML和JavaScript代碼：element.style顯示不正確的信息

<html> 
    <head> 
     <style>p { height: 100px;} </style> 
     <script> 
      window.onload = function(){ 
       var p = document.getElementsByTagName("p")[0]; 
       alert("actual height is " + p.style.height); 
      }; 
     </script> 
     <title>JavaScript Tests</title> 
    </head> 
    <body> 
     <p> 
      100px height p element 
     </p> 
    </body> 
</html>

但是，當我們運行它的實際高度等於空字符串。
你能解釋一下爲什麼？
謝謝。

來源

2010-12-08 Kai

的style屬性是在CSS的實際風格不同：它看起來爲style屬性，所以這樣的：

<p style="height: 100px"></p> 
<script>alert(document.getElementsByTagName("p")[0].style.height);</script>

將是「100像素」。請使用getComputedStyle()。

<style> p { height: 100px; }</style> 
<p></p> 
<script>alert(getComputedStyle(document.getElementsByTagName("p")[0]).getPropertyValue("height"));</script>

來源

2010-12-08 06:24:13

請注意，getComputedStyle（）在所有流行的IE版本中都得不到很好的支持。 – cdhowie 2010-12-08 06:49:21

style屬性是指在元素上明確設置的樣式屬性，而不是從CSS聲明繼承的樣式。

例如，試試這個：

<p style="height: 100px;">

然後你會看到一個值。請參閱this document，該方法將所有各種樣式信息組合在一起以檢索元素的實際組合樣式。

來源

2010-12-08 06:23:57 cdhowie

element.style顯示不正確的信息

回答

相關問題