天天视点!jquery怎么检测元素是否隐藏

时间:2022-12-16 15:59:08       来源:PHP中文网

前端(vue)入门到精通课程,老师在线辅导:联系老师Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用


(资料图片仅供参考)

本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。

jquery检测元素是否隐藏的几种方法

方法1:使用css()检测display属性的值是否为none

css()可以返回被选元素的一个或多个样式属性。

只需要使用css()获取display属性的值,判断该值是否为none即可检测该元素是否隐藏

是none,则该元素隐藏

不是none,则该元素不隐藏

<script src="js/jquery-3.6.1.min.js"></script><script type="text/javascript">$(document).ready(function() {$("button").click(function() {if ($("#hide").css("display")=="none") {console.log("#hide元素隐藏了");} else {console.log("#hide元素没隐藏,是可见的");}if ($("#show").css("display")=="none") {console.log("#show元素隐藏了");} else {console.log("#show元素没隐藏,是可见的");}});});</script>
#show元素-我是显示的内容,你看的到我。

登录后复制

方法2:利用is()方法和“:hidden”选择器检测

is() 方法用于查看选择的元素是否匹配选择器。

:hidden 选择器选取隐藏的元素。以下几种情况的元素是隐藏元素:

设置为 display:none

带有 type="hidden" 的表单元素

隐藏的父元素(这也会隐藏子元素)

检测语法:

元素对象.is(":hidden")
登录后复制

返回值为真,则元素是隐藏的;返回值为假则不是隐藏的。

示例

<script src="js/jquery-3.6.1.min.js"></script><script type="text/javascript">$(document).ready(function() {$("button").click(function() {if ($("#hide").is(":hidden")) {console.log("#hide元素隐藏了");} else {console.log("#hide元素没隐藏,是可见的");}if ($("#show").is(":hidden")) {console.log("#show元素隐藏了");} else {console.log("#show元素没隐藏,是可见的");}});});</script>
#show元素-我是显示的内容,你看的到我。

登录后复制

方法3:利用is()方法和“:visible”选择器检测

is() 方法用于查看选择的元素是否匹配选择器。

:visible 选择器选取当前可见的每个元素。除以下几种情况之外的元素即是可见元素:

设置为 display:none

带有 type="hidden" 的表单元素

width 和 height 设置为 0

隐藏的父元素(这也会隐藏子元素)

检测语法:

!(元素对象.is(":visible"))
登录后复制

返回值为真,则元素是隐藏的;返回值为假则不是隐藏的。

示例:

<script src="js/jquery-3.6.1.min.js"></script><script type="text/javascript">$(document).ready(function() {$("button").click(function() {if (!($("#hide").is(":visible"))) {console.log("#hide元素隐藏了");} else {console.log("#hide元素没隐藏,是可见的");}if (!($("#show").is(":visible"))) {console.log("#show元素隐藏了");} else {console.log("#show元素没隐藏,是可见的");}});});</script>
#show元素-我是显示的内容,你看的到我。

登录后复制

【推荐学习:jQuery视频教程、web前端视频】

以上就是jquery怎么检测元素是否隐藏的详细内容,更多请关注php中文网其它相关文章!

关键词: 你看不到我 以下几种