jQuery 如何判断元素是否可见

阅读时长 3 分钟读完

在前端开发中,有时需要在元素显示出来之后再进行一些操作,比如获取某个 DOM 元素的尺寸、位置等信息。jQuery 提供了一个方便的方法用于判断元素是否可见:$.fn.is(':visible')

:visible 选择器

:visible 是 jQuery 中的一个伪类选择器,用于匹配可见的元素。可见的元素包括:

  • 宽度和高度都大于 0;
  • display 属性不是 none;
  • visibility 属性不是 hidden;
  • opacity 不是 0;

如果元素的任意一个祖先元素隐藏或者元素自身的样式设置为 display:nonevisibility:hiddenopacity:0,那么该元素就被认为是不可见的。

判断元素是否可见

可以使用 .is(':visible') 方法检查元素是否可见。这个方法返回一个布尔值,如果元素在页面中可见则返回 true,否则返回 false。

示例代码:

上面的代码会根据 #myElement 元素是否可见来执行不同的操作。

监听元素可见性变化

有时候需要监听元素可见性的变化,比如在某个元素显示出来之后执行一些操作。可以使用 jQuery.fn.isVisible 方法来实现。

示例代码:

-- -------------------- ---- -------
-------------- - ---------- -
  --- ---- - --------------------------------
  ------ ------------ --- - -- ----------- --- ---
--

--- ---------- - ----------------
--- --------- - -----------------------

-- ----------- -
  -- ----
- ---- -
  -- -----
-

-- ---------
------------------------------ ---------- -
  -- ------------------------ -
    -- --------
  - ---- -
    -- ---------
  -
---

上面的代码中,$.fn.isVisible 是自定义的一个方法,用于判断元素是否可见。在监听元素可见性变化时,首先获取元素当前的可见性状态,然后添加一个 transitionend 事件监听器,当元素的可见性发生变化时,检查元素的可见性状态并执行对应的操作。

结论

可以使用 :visible 选择器来判断元素是否可见,也可以自定义方法来监听元素可见性的变化。在实际开发中,需要根据具体需求选择合适的方法来操作元素。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/26008

纠错
反馈