jquery怎么判断元素是否隐藏
墨初 Web前端 623阅读
jquery判断元素是否处于隐藏状态,有多种方法。但大致的逻辑都是判断div的CSS隐藏属性,下面是判断方法。
jquery判断元素是否隐藏的方法
方法1:
JQ判断元素的CSS样式中的 display 属性,元素css样式的 display 属性的值如果设置为 none ,则元素会被隐藏。通过jq获取css的 display 的属性值是否为 none,来判断元素是否为隐藏状态。
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> <style> #main{ display: none; } </style> <div id="main"> 我是被隐藏的! </div> <script> var isnone = $('#main').css('display'); if(isnone == 'none'){ // 元素隐藏 }else{ // 元素没有被隐藏 } </script>
方法2:
使用jq内置的选择器进行判断,其有两种判断方式。
(1)、:hidden 判断是否为隐藏状态
if($("#main").is(":hidden")){ console.log('隐藏状态'); }else{ console.log('显示状态'); }
(2)、:visible 判断是否为显示状态
if($("#main").is(":visible")){ console.log('显示状态'); }else{ console.log('隐藏状态'); }
PS:注意jquery选择器 :hidden 与 :visible 用法,它们两个的作用是相反的!