jquery判断div是否显示或者隐藏

封面图 • 2025-05-02 • jQuery

在 jQuery 中，可以通过 `.is()` 方法结合 `:visible` 和 `:hidden` 选择器来判断一个 `div` 是否显示或隐藏。

### 判断 `div` 是否显示：
```javascript
if ($('#yourDivId').is(':visible')) {
    console.log('该 div 是显示的');
} else {
    console.log('该 div 是隐藏的');
}
```

### 判断 `div` 是否隐藏：
```javascript
if ($('#yourDivId').is(':hidden')) {
    console.log('该 div 是隐藏的');
} else {
    console.log('该 div 是显示的');
}
```

### 示例代码：
HTML:
```html
<div id="yourDivId" style="display:none;">这是一个 div</div>
<button id="checkButton">检查状态</button>
```

JavaScript:
```javascript
$('#checkButton').on('click', function() {
    if ($('#yourDivId').is(':visible')) {
        console.log('该 div 是显示的');
    } else {
        console.log('该 div 是隐藏的');
    }
});
```

在这个例子中，点击按钮会检查 `#yourDivId` 的显示状态，并输出其是否是可见的。如果 `div` 被设置为 `display: none;`，那么它会被认为是隐藏的。

### 注意事项：
- `:visible` 和 `:hidden` 不仅仅检查 `display` 属性，还会考虑其他因素，比如 `visibility`, `opacity`, `width`, `height` 等。
- 如果你只想检查 `display: none` 或者 `visibility: hidden`，可以使用以下方式：

#### 检查 `display: none`:
```javascript
if ($('#yourDivId').css('display') === 'none') {
    console.log('该 div 的 display 属性是 none');
} else {
    console.log('该 div 的 display 属性不是 none');
}
```

#### 检查 `visibility: hidden`:
```javascript
if ($('#yourDivId').css('visibility') === 'hidden') {
    console.log('该 div 的 visibility 属性是 hidden');
} else {
    console.log('该 div 的 visibility 属性不是 hidden');
}
```

通过这些方法，你可以灵活地判断 `div` 的显示或隐藏状态。