如何使用純 JavaScript 準確地確定 DOM 中元素的可見性？

DOM 中的可見性偵測

使用文件物件模型(DOM) 中的元素時，通常需要確定元素是否是可見的。在純 JavaScript 中，不使用 jQuery 等函式庫，檢查可見性需要仔細檢查特定的 HTML 屬性。

要確定元素的可見性，請考慮以下屬性：

• display：此屬性指定元素的顯示行為。如果設定為“none”，則隱藏該元素。
• visibility：此屬性控制元素的可見性，允許其隱藏或可見。

在提出的問題中，使用者嘗試使用 window.getCompulatedStyle(my_element)['display']) 來檢查可見性，但沒有成功準確。

但是，可以使用另一種方​​法來使用其 offsetParent 屬性來檢查元素的可見性。如果某個元素或其任何父元素的 display 屬性設為“none”，則其 offsetParent 將為 null。這可以用來判斷一個元素是否可見。

對於沒有固定定位的元素，可以使用以下函數：

function isHidden(el) {
    return (el.offsetParent === null);
}

對於有固定定位的元素，可以使用一個更精確的做法是使用window.getCompulatedStyle()，它考慮了更多的邊緣情況。

function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none');
}

這種方法更全面，但比上一種慢。如果速度是一個問題，最好盡可能使用 offsetParent 屬性。

以上是如何使用純 JavaScript 準確地確定 DOM 中元素的可見性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！