如何在html和纯javascript中发现元素是否被隐藏

在HTML和纯JavaScript中，可以使用以下方法来判断元素是否被隐藏：

使用CSS的display属性：通过检查元素的display属性来确定其是否被隐藏。如果display属性的值为"none"，则表示元素被隐藏了。

var element = document.getElementById("myElement");
if (window.getComputedStyle(element).display === "none") {
    console.log("元素被隐藏了");
} else {
    console.log("元素可见");
}

使用CSS的visibility属性：通过检查元素的visibility属性来确定其是否被隐藏。如果visibility属性的值为"hidden"，则表示元素被隐藏了。

var element = document.getElementById("myElement");
if (window.getComputedStyle(element).visibility === "hidden") {
    console.log("元素被隐藏了");
} else {
    console.log("元素可见");
}

使用CSS的opacity属性：通过检查元素的opacity属性来确定其是否被隐藏。如果opacity属性的值为0，表示元素完全透明，即被隐藏了。

var element = document.getElementById("myElement");
if (window.getComputedStyle(element).opacity === "0") {
    console.log("元素被隐藏了");
} else {
    console.log("元素可见");
}

使用CSS的height和width属性：通过检查元素的height和width属性来确定其是否被隐藏。如果height和width属性的值为0，表示元素被隐藏了。

var element = document.getElementById("myElement");
if (element.offsetHeight === 0 && element.offsetWidth === 0) {
    console.log("元素被隐藏了");
} else {
    console.log("元素可见");
}

这些方法可以在HTML和纯JavaScript中使用，无需依赖任何外部库或框架。根据具体的需求和场景，选择适合的方法来判断元素是否被隐藏。

腾讯云相关产品和产品介绍链接地址：