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

使用純JavaScript 確定DOM 中元素的可見性

問題：

問題：

我們可以

問題：

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

我們可以確定如果一個元素在DOM 中可見而不依賴jQuery？具體來說，我們應該檢查哪些屬性來確定其可見性？

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

答案：

根據 MDN 文檔，如果元素或其任何祖先元素的 offsetParent 屬性返回 null通過顯示樣式屬性隱藏。然而，這假設該元素的位置不固定。如果頁面上沒有position:fixed元素，那麼檢查可見性的簡潔腳本可以是：如果頁面上有position:fixed元素，我們遺憾地不得不求助於window .getCompulatedStyle()進行徹底檢查，這可能會對性能產生影響：儘管它對邊緣情況敏感，但第二個選項提供了更高的清晰度。如果要重複執行該操作，請考慮第一個選項以提高效率，避免 window.getCompulatedStyle() 的效能損失。

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