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>

は "100pxに" となります。

実際の高さを取得するには、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

確かに。 IEでは代わりに 'elem.currentStyle.height'を使うことができます。 –

styleプロパティは、CSS宣言から継承されたスタイルではなく、のスタイルを明示的に設定したスタイル属性を参照します。

たとえば、これを試してみてください。

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

が次にあなたが値が表示されます。要素の実際の合成スタイルを取得するために、さまざまなスタイル情報のすべてを組み合わせるアプローチについては、this documentを参照してください。

出典

2010-12-08 06:23:57 cdhowie

element.style表示誤った情報

答えて

関連する問題