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

打印页面