Question

根据DOM Javascript，DIV的宽度没什么。

这是一个如此简单的小问题，但它很烦人。

<html>
    <head>
        <style>
            div#foot_wrapper{
                width:650px;
                height:20px;
                position:absolute;
                bottom:10px;
                background-color:#000000;
            }
        </style>
        <script>

            function align(div){
                                 alert(div.style.width); // ---------------- box pops up blank?
                div.style.left = (window.innerWidth/2) - (div.style.width/2);       
            }
        </script>

    </head>

    <body onload="align(document.getElementById('foot_wrapper'))" onresize="align(document.getElementById('foot_wrapper'))" >

        <div id="main">
        </div>

        <div id="foot_wrapper">
        </div>

    </body>
</html>

Answer 1

尝试使用div.offsetWidth ^MDN代替div.style.width。

style ^MDN属性仅反映元素内联设置的样式（使用元素上的style属性）。

另见Javascript - Get Style ^Quirksmode

（为了获得最佳效果，您可以使用像jQuery这样的库。作者已经解决了可能的浏览器差异和怪癖，因此您不必处理这些问题。）

Answer 2

style属性为您提供直接指定给元素的样式，而不是从样式表应用或继承的样式。

Answer 3

这是因为style DOM属性仅包含内联定义的CSS属性。如果您使用<div style="width: 650px;">，则会看到正确的结果。对于维度，使用innerWidth / clientWidth，可以使用window.getComputedStyle()（现代浏览器）或currentStyle DOM属性（IE <= 8）来读取其他属性。两者的行为略有不同 - 如果您使用width: 1em，getComputedStyle会返回16px而currentStyle会返回1em，但对于某些更简单的任务来说，它应该足够了。< / p>

根据Javascript，DIV的宽度是什么，为什么？

3 个答案: