js脚本在控制div元素在显示与隐藏之间进行切换时,如果不能确定div当前的状态,切换时往往会发生一些逻辑错误的事情,导致div元素的动态效果在切换时不是很流畅。那么就来说一说,如何判断div当前是否处于隐藏的状态方法。
html代码
<div id="mochu" style="display: none;"> 免费资源网 我是隐藏状态的元素,你看不到我的 </div>
以下所以的示例代码,都以判断此DIV元素为例
原生js判断DIV是否隐藏的代码
示例代码:
<script> //判断是否隐藏 if (document.getElementById("mochu").style.display === 'none') { console.log('已隐藏'); }else{ console.log('没有隐藏'); } //判断是否显示 if (document.getElementById("mochu").style.display === 'block') { console.log('没有隐藏'); }else{ console.log('已隐藏'); } //都输出 已隐藏 </script>
PS:上面两个代码的效果都是一样的,只是判断的方式不同而已,一个判断是否隐藏,一个判断是否显示。
jq代码判断div是否隐藏
jq判断是否隐藏:
<script> var s = $("#freexyz").is(":hidden"); console.log(s); //输出 true </script>
注意:
1、代码返回的结果为布尔值
2、true 表示元素已隐藏,不再显示
3、false 表示元素未被隐藏,一直显示
JS判断是否显示
<script> var r = $("#freexyz").is(":visible"); console.log(r); //输出 false </script>
注意:
1、代码返回的结果同样为布尔值
2、false 表示元素已隐藏,不再显示
3、true 表示元素显示,未被隐藏