如何在JQuery中检查元素是否可见？

这是一个关于在Jquery中检查一个div的可见与否的简短教程。

在Html中，元素可以通过以下三种方式显示或隐藏

• display -block/none
• 可见性 - 隐藏/无
• 不透明度 - 0到1

比如说:

element1
element2
element3

这样一来，三个div在浏览器中的显示效果就像

element1
element2
element3

让我们使用display和visibility做一些样式上的改变来隐藏element1和element2

element1的div使用display:none属性被隐藏，而element2则使用display:none属性被隐藏:visibility:hidden

.element1{
  display:none;
}
.element2{
  visibility:hidden;
}
And you can see in the browser
```markup

element3

display:none和visibility:hidden的区别如下

Display:none

• 它不会为这个元素分配空间
• 这些元素在渲染的页面上是不可见的
• 你仍然可以使用DOM事件来与之交互。

visibility:hidden

• 该元素在浏览器上是不可见的
• 它为这个元素分配了空间，并且是空的
• 可以用DOM事件进行操作

如何检查Div是否可见

Jquery提供了带有:visible属性的is函数

如果div是display:none:

• is(':visible') 返回 false

• is(':hidden') - 如果Div是visibility:hidden，返回true。

• is(':visible') 返回 false

• is(':hidden') - 返回 true

  同样可以使用$('.element1:hidden')或$('.element2:visible')语法来重写:

var isElement1Visible = $('.element1').is(':visible');
var isElement1Hidden = $('.element1').is(':hidden');

var isElement2Visible = $('.element1').is(':visible');
var isElement2Hidden = $('.element1').is(':hidden');
console.log('isElement1Visible',isElement1Visible); // false
console.log('isElement1Hidden',isElement1Hidden); //true
console.log('isElement2Visible',isElement2Visible);//false
console.log('isElement2Hidden',isElement2Hidden); // true

要检查div是否可见，我们可以使用is(':hidden')或is(:visible)，基于显示或可见性。

你也可以设置opactiy:0 ，这与visibility:hidden 属性类似。

要检查div是否可见，我们可以在以下情况下检查

if($(.element1).is(':hidden')){

}

或使用css选择器，显示属性等于none

if( $(.element1).css('display') == 'none' ){
}

如何使用jquery检查一个div是否隐藏

如上所述，你可以使用visible 选择器，你可以使用以下语法

$(elementselector:visible)
$(elementselector:hidden)

同样可以用css selector

$(elementselector).css('display') == 'none' or 
 $(elementselector).css("visibility") == "hidden"

结论

html元素可以使用display:none、visibility:hidden或opacity:0来隐藏，上面提到的jquery css条件选择器可以根据你的布局设计检查元素是否可见。