javascript - 使用 Javascript 或 HTML，如何获取 div 或其他元素的高度和宽度？

Question

我已经尝试了一段时间来“获取”我网页上 div 的高度和宽度。我尝试了很多东西，其中一些是：

document.getElementById("header").getHeight();
                                 .height();
                                 .height;
                                 .pixelHeight()

以及所有其他“明显”的可能性。请问有什么帮助吗？它只是一个具有宽度和高度的简单 div：

<style>
    #header {
        width: 500px; 
        height:100px; 
        background-color:black; 
        border: 2px solid red;
    }
</style>
<body>
    <div id="header" style="position:absolute" onclick="testjs()" />
    <script language="javascript" type="text/javascript">
        var hdiv = document.getElementById("header");

        function testjs()
        {
            hdiv.style.height="221px";
        }           

        /////////////////////////////////////
        hdiv.getHeight();              ???????
        //////////////////////////////////////
    </script>

我想“获取”div 的高度和宽度，因为最终用户将能够动态地改变高度和宽度。

score 7 · Accepted Answer

获得高度使用

document.getElementById("header").offsetHeight

和宽度使用

document.getElementById("header").offsetWidth;

score 3 · Accepted Answer

您应该考虑获取 jQuery，因为这样您就可以更轻松地进行此操作：

$("#header").width(); // Gets the width;
$("#header").width(50); // Set width to 50;
$("#header").height(); // Gets the height;
$("#header").height(50); // Set height to 50;

从长远来看，它也会让你的生活更轻松。使用原生 Javascript 编写可能很麻烦，因为它需要更多代码和大量跨浏览器测试。

score 0 · Accepted Answer

例子 -

var divheight = document.getElementById('divId').offsetHeight;

参考这个 -

http://www.w3schools.com/jsref/dom_obj_all.asp

score 0 · Accepted Answer

如果你不使用 jQuery 试试这个：

document.getElementById('someDiv').clientHeight;
document.getElementById('someDiv').offsetHeight;
document.getElementById('someDiv').scrollHeight;

取决于你需要什么。

javascript - 使用 Javascript 或 HTML，如何获取 div 或其他元素的高度和宽度？

4 回答 4

Related

Reference