HTML - DOM 元素 offsetParent 屬性

元素的 offsetParent 屬性用於查詢最近的祖先元素，該祖先元素會影響另一個元素的定位。如果使用 display="none" 隱藏元素，則其 offsetParent 屬性返回 null。

語法

element.offsetParent

返回值

offsetParent 屬性返回一個影響另一個元素定位的元素。如果元素被隱藏，則返回 null。

HTML DOM 元素 'offsetParent' 屬性示例

以下是一些顯示 'id' 屬性用法的示例，以便更好地理解。

顯示元素的 Offset Parent

此示例顯示了 offsetParent 屬性的用法。以下程式碼包含一個帶有示例元素的 <div> 容器。單擊按鈕後，它將顯示示例元素的 offsetParent。

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
    .c {
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black; 
    }
    .b {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 100px; 
    background-color: lightblue;
    }
</style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>offsetHeight Property</h2>
    <div class="c">
        <div class="b" id="e">Example Element</div>
    </div>

    <button onclick="s()">Show offsetParent</button>
    <div id="o"></div>

    <script>
        function s() {
        const e = document.getElementById('e');
        const p = e.offsetParent;
        const o = document.getElementById('o');
        o.textContent = `Offset Parent: 
        ${p ? p.tagName : 'null'}`;
        }
    </script>
</body>

</html>

處理隱藏元素

此示例顯示了在處理隱藏元素時 offsetParent 屬性的用法。以下程式碼包含一個按鈕，單擊該按鈕時，會顯示一條警告訊息：“元素的 offsetParent 為 null”。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
    .con {
        position: relative;
        width: 300px;
        height: 200px;
        border: 1px solid black;
    }
    .hid {
        display: none;
    }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>offsetParent Property</h2>
    <p>Handles when the element is hidden...</p>
    <div class="con">
        <div class="hid" id="ele">hid Element</div>
    </div>

    <button onclick="offp()">Show Pt</button>

    <script>
        function offp() {
            const ele = document.getElementById('ele');
            const Pt = ele.Pt;
            alert(`Offset Parent: ${Pt ? Pt.tagName : 
            'null'}`);
        }
    </script>
</body>

</html>

支援的瀏覽器

屬性
offsetParent	是	是	是	是	是

html_dom_element_reference.htm

列印頁面