如何使用纯 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中文网其他相关文章！