Fatal编程技术网
  • javascript/
  • Javascript element.style显示不正确的信息

Javascript element.style显示不正确的信息

javascript html css

Javascript element.style显示不正确的信息,javascript,html,css,Javascript,Html,Css,有一个简单的html和javascript代码： <html> <head> <style>p { height: 100px;} </style> <script> window.onload = function(){ var p = document.getElementsByTagName("p")[0];

有一个简单的html和javascript代码：

<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>


p{高度：100px；}
window.onload=函数（）{
var p=document.getElementsByTagName（“p”）[0]；
警报（“实际高度为”+p.style.height）；
};
JavaScript测试

100px高度p元件
但当我们运行它时，实际高度等于空字符串。
你能解释一下原因吗？
谢谢。

style属性指的是在元素上显式设置的样式属性，而不是从CSS声明继承的样式

例如，尝试以下方法：

<p style="height: 100px;">
然后您将看到一个值。有关将所有不同的样式信息组合在一起以检索元素的实际组合样式的方法，请参阅。

样式属性与CSS中的实际样式不同：它查找
样式属性，因此：


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



请注意，
getComputedStyle（）
并非在IE的所有流行版本中都得到很好的支持。您可以在IE中使用
elem.currentStyle.height
。

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