HTML - DOM 元素 offsetHeight 属性

元素的 offsetHeight 属性返回该元素在网页上完全可见的高度，包括其垂直填充和边框，以像素为单位。

语法

element.offsetHeight

返回值

offsetHeight 属性返回一个整数，表示元素的总像素高度，包括其填充和边框。

HTML DOM 元素 'offsetHeight' 属性示例

以下是一些示例，用于更好地理解 'offsetHeight' 属性的用法。

计算元素的 offsetHeight

此示例演示了在以下代码中 offsetHeight 属性的用法，它通过创建一个新的 p 元素来计算并显示元素的高度。然后将段落的文本内容设置为显示 offsetHeight 值。

<!DOCTYPE html>
<html>
<head> 
    <style>
    .box {
        width: 200px; 
        padding: 20px;
        border: 1px solid black;
    }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>offsetHeight Property</h2>
    <p>Displays the offset height of the box.</p>
    
    <div class="box" id="myBox">Hello, world!</div>
    <script>
        var element = document.getElementById("myBox");
        var height = element.offsetHeight;
        
        var p = document.createElement('p');
        p.textContent = "Offset height of the box: " + height;

        // Append the paragraph element after the box element
        element.insertAdjacentElement('afterend', p);
    </script>
</body>

</html>

计算滚动条的 offsetHeight

此示例演示了如何使用 offsetHeight 属性处理固定大小容器内的溢出内容，以下代码计算并显示容器的 offsetHeight。

<!DOCTYPE html>
<html>
<head> 
    <style>
    .scroll-box {
        width: 200px;
        height: 100px;
        border: 1px solid black;
        overflow-y: scroll;
    }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>offsetHeight Property</h2>
    <div class="scroll-box" id="myScrollBox">
        <p>Scroll down to see more content.</p>
        <p>Content 1</p>
        <p>Content 2</p>
        <p>Content 3</p>
        <p>Content 4</p>
    </div>
    
    <p id="heightDisplay"></p>

    <script>
        var element = document.getElementById("myScrollBox");
        var height = element.offsetHeight;
        document.getElementById("heightDisplay").textContent =
        "Offset height of the scroll box: " + height + "px";
    </script>
</body>

</html>

计算元素高度

此示例显示一个元素 (<div> class = "element")，其高度根据其内容进行调整。以下代码在单击按钮时计算并显示元素的高度。

<!DOCTYPE html>
<html>
<head>
    <style>
        .element {
            width: 300px;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
    <script>
        function cal() {
            var eleH = 
            document.getElementById('dy').offsetHeight;
            document.getElementById('eleHD').textContent=
            'Element height: ' + eleH + 'px';
        }
    </script>
</head>

<body>
    <div class="element" id="dy">
        <h1>HTML - DOM Element</h1>
        <h2>offsetHeight Property</h2>
        <p>Click the button to calculate the 
            element height:
        </p>
        <button onclick="cal()">Calculate Height</button>
    </div>
    
    <p id="eleHD"></p>
</body>

</html>

Div 元素的高度和宽度

此示例演示如何使用 offsetHeight 属性计算 div 元素的高度和宽度，包括填充和边框。计算出的尺寸然后在 <p> 元素中显示为输出。

<!DOCTYPE html>
<html>
<head> 
    <style>
        #myDIV {
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 5px solid black;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>offsetHeight Property</h2>
    <div id="myDIV">
        <h1>Element Dimensions Example</h1>
        <p>This div includes padding and border.</p>
    </div>
    
    <p id="dimensionsDisplay"></p>
    
    <script>
        var div = document.getElementById('myDIV');
        var dimensionsDisplay = document.getElementById
        ('dimensionsDisplay');
        
        // Calculate and display dimensions
        dimensionsDisplay.textContent = "Total width: "
        +div.offsetWidth+"px,Total height:"
        +div.offsetHeight + "px";
    </script>
</body>

</html>

支持的浏览器

属性
offseHeight	是	是	是	是	是

html_dom_element_reference.htm

打印页面