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 2010-12-08 06:49:21

Свойство style относится к атрибутам стиля, установленным явно для элемента, не стилей, унаследованных от объявлений CSS.

Например, попробуйте следующее:

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

Тогда вы увидите значение. См. this document для подхода, который объединит все различные фрагменты информации стиля для получения фактического композитного стиля элемента.

источник

2010-12-08 06:23:57 cdhowie

element.style дисплей неверная информация

ответ

Смежные вопросы