Jquery判断元素是否隐藏：display属性状态值

很多时候，我们都要判断元素当前是否处于显示或隐藏状态。Jquery通过判断元素display属性状态值来实现“判断当前操作元素是否显示还是隐藏”，实现方法主要使用Jquery提供的基本选择器 :visible 或 :hidden方法。

点击下面的“运行”按钮，在打开的页面中可多次点击右上角按钮，查看效果：

<style type="text/css">
.run-button{width:100px; height:38px;display:block;position:absolute;right:70%; top:200px;}
.test{ width:100px; height:100px; color:#000; border:1px blue solid;}
.tips{color:#f00;}
</style><script type="text/javascript">
$(function(){$(".run-button").focus().click(function(){if($('.test').is(':visible')){$('.test').hide().next().text('注意:div被隐藏了！');}else{$('.test').show().next().text('div显示，能看见');}
//用基本选择器 :hidden 也行
//      if($('.test').is(':hidden')){
//          $('.test').show().next().text('div显示，能看见');
//          }else{
//              $('.test').hide().next().text('注意:div被隐藏了！');
//              }})})
</script>
<p style="padding:8px 0;">说明：多次点击右上角按钮，使div层在显示 、隐藏两者状态间自由切换
</p>
<p><input type="button" value="点击测试" class="run-button"/>
</p>
<div class="test">该div默认显示
</div>
<p><span class="tips">注意：div当前显隐藏状态</span>
</p>

当然也可以通过jq读取CSS样式中的display值来判断当前display属性状态值,但还是推荐使用上面的方法！

Jquery判断元素是否隐藏：display属性状态值相关推荐

html if 隐藏元素,jquery判断元素是否隐藏？
这篇文章主要介绍了jquery判断元素是否隐藏的多种方法,需要的朋友可以参考下. jquery判断元素是否隐藏? 1.首先获取需要判断的元素var node = $('#id'); 2.然后使用jqu ...
html点击显示隐藏判断,jquery判断元素是否隐藏的多种方法
第一种:使用CSS属性 var display =$('#id').css('display'); if(display == 'none'){ alert("被你发现了,我是隐藏的啦!&q ...
jquery判断元素是否隐藏的多种方法
第一种:使用CSS属性复制代码代码如下: var display =$('#id').css('display'); if(display == 'none'){ alert("被 ...
前端jquery判断元素是否隐藏
true隐藏,false显示 var a = $('#kuang').is(':hidden'); console.log(a)
jquery控制元素的隐藏和显示的几种方法。
使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#id").hide ...
js判断元素是否隐藏
点击隐藏和显示 <div class="list">报名</div><div class="content" id="c ...
jQuery 判断元素是否存在
前言 jQuery v3.5.1 jQuery 查找元素比如查找某个input元素$("input[name='email']"). 示例: <html> <h ...
[Web 前端] Jquery 复制元素，并修改属性, 追加到另一个元素后面
cp from : https://blog.csdn.net/cooledi/article/details/52813668 jquery 复制元素,并修改属性 $('#ID').clone() ...
jQuery判断元素是否显示与隐藏
jQuery判断一个元素是显示还是隐藏,jQuery使用is()方法来判断一个元素是否显示,反之则为隐藏核心代码 if($("#username").is(":hidd ...

Jquery判断元素是否隐藏：display属性状态值

Jquery判断元素是否隐藏：display属性状态值相关推荐

最新文章

热门文章