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

列印頁面