jquery判断元素是否隐藏的多种方法

当我们使用jQuery进行页面开发时，有时需要判断页面元素是否隐藏。本文将介绍三种方法来实现这个目标。

方法一：使用.css("display")方法

我们可以使用.css("display")方法来获取元素的显示状态。如果元素已隐藏，.css("display")将返回“none”，否则它将返回元素的显示状态。

示例1：隐藏一个元素并检查其状态

<!-- HTML -->
<div id="myDiv" style="display:none;">Hello, World!</div>

// jQuery
if ($("#myDiv").css("display") === "none") {
    console.log("myDiv is hidden");
} else {
    console.log("myDiv is visible");
}

示例2：显示一个元素并检查其状态

<!-- HTML -->
<div id="myDiv">Hello, World!</div>

// jQuery
if ($("#myDiv").css("display") === "none") {
    console.log("myDiv is hidden");
} else {
    console.log("myDiv is visible");
}

方法二：使用.is(":visible")方法

jQuery提供了.is(":visible")方法来判断元素是否可见。

示例1：隐藏一个元素并检查其状态

<!-- HTML -->
<div id="myDiv" style="display:none;">Hello, World!</div>

// jQuery
if ($("#myDiv").is(":visible")) {
    console.log("myDiv is visible");
} else {
    console.log("myDiv is hidden");
}

示例2：显示一个元素并检查其状态

<!-- HTML -->
<div id="myDiv">Hello, World!</div>

// jQuery
if ($("#myDiv").is(":visible")) {
    console.log("myDiv is visible");
} else {
    console.log("myDiv is hidden");
}

方法三：使用.height()和.width()方法

如果元素的高度或宽度为0，则可以将元素视为隐藏。

示例1：隐藏一个元素并检查其状态

<!-- HTML -->
<div id="myDiv" style="display:none;">Hello, World!</div>

// jQuery
if ($("#myDiv").height() === 0 && $("#myDiv").width() === 0) {
    console.log("myDiv is hidden");
} else {
    console.log("myDiv is visible");
}

示例2：显示一个元素并检查其状态

<!-- HTML -->
<div id="myDiv">Hello, World!</div>

// jQuery
if ($("#myDiv").height() === 0 && $("#myDiv").width() === 0) {
    console.log("myDiv is hidden");
} else {
    console.log("myDiv is visible");
}

这三种方法都可以用来判断元素的显示状态，但使用哪种方法最终取决于你的具体需求和情况。