检查元素是否可见 jQuery - Javascript

在 web 开发的过程中，有时需要检查某个元素是否可见。这个过程相对简单，但需要注意一些细节。

使用 jQuery 的 is() 方法

可以使用 jQuery 的 is() 方法来检查元素是否可见。该方法接受一个参数，表示要检查的属性名称，比如 :visible 表示检查元素是否可见。如果该方法返回 true，则表示元素可见；否则表示元素不可见。

以下是示例代码：

// 判断 id 为 "example" 的元素是否可见
if ($('#example').is(':visible')) {
  console.log('visible');
} else {
  console.log('hidden');
}

使用 offsetWidth 和 offsetHeight 属性

另外一种检查元素是否可见的方法是使用元素的 offsetWidth 和 offsetHeight 属性。这两个属性分别表示元素的宽度和高度，如果一个元素的宽度和高度都为 0，则表示该元素不可见。

以下是示例代码：

// 判断 id 为 "example" 的元素是否可见
var example = document.getElementById('example');
if (example.offsetWidth > 0 && example.offsetHeight > 0) {
  console.log('visible');
} else {
  console.log('hidden');
}

注意事项

当使用 is() 方法时，需要注意以下几点：

• is(':visible') 仅能检查元素本身是否可见，不能检查元素的子元素是否可见。
• 如果一个元素的样式为 display: none，则该元素的 offsetWidth 和 offsetHeight 属性可能为非 0 值，因此不能使用这两个属性来检查元素是否可见。
• 如果一个元素的样式为 visibility: hidden，则该元素的 offsetWidth 和 offsetHeight 属性为非 0 值，但它并未被渲染出来，因此该元素仍未可见。

结论

综上所述，使用 jQuery 的 is() 方法是一种比较可靠的检查元素是否可见的方法，但需注意其使用的限制。当需要精确地检查元素是否可见时，可以使用 offsetWidth 和 offsetHeight 属性。