id.styles 没有显示任何内容

Question

我不确定我是要完全疯了还是我的电脑出了问题。

下面有一段简单的 JavaScript，但是当我控制台记录样式对象时，它完全是空的。尽管事实上所讨论的元素显然附加了样式。

<!doctype html>
<html>
<head>

<style>

    #para{  
        width: 100px;
        height: 100px;
        position: absolute;
        left: 200px;
        top: 10px;
        border: 1px solid red;      
    }

</style>
</head>

<body>

    <div id="para" class="paraDiv">This is the div</div>

<script>
        window.onload = function(){
            var d = document.getElementById('para');    
            console.dir(d);
            console.log(d.style.top);
        }

</script>

</body>
</html>

Answer 1

style 属性仅获取有关通过元素的 style 属性内联应用的样式的信息。它不包含有关从其他元素继承或在样式表中声明的样式的任何信息。

相反，您需要 window.getComputedStyle，这将为您提供所需的信息。

console.log(getComputedStyle(para).top);

id.styles 没有显示任何内容

id.styles is showing nothing

javascript

console