通过JS判断一个元素是否显示、隐藏

文章目录

• • • 通过display是否等于none来判断
    • 通过jquery的:hidden/:visible 伪类来判断
    • 说明

通过display是否等于none来判断

通过判断当前元素的display的值来判断当前元素是否是可见状态。只能用display来对none进行对比判断。因为可见元素的状态可能是block、inline等

代码实现

<div class="wrap" style="display:none">
	我是一个元素，来判断我是否是可见的
</div>
           

function  isNone(){
	if ($("div").css("display") == "none") {
		alert("这是一个diaplay=none的元素")
	}else{
		alert("这不是一个diaplay=none的元素")
	}
}
           

通过jquery的:hidden/:visible 伪类来判断

代码实现

<div class="wrap" style="display:none">
	我是一个元素，来判断我是否是可见的
</div>
           

function isHidden() {
	if ($("div").is(':visible')) {
		alert("这是一个可见元素");
	}else{
		alert("这是一个不可见元素");
	}
	if ($("div").is(':hidden')) {
		alert("这是一个隐藏元素");
	}else{
		alert("这是一个不隐藏元素");
	}
}
           

说明

无论元素是通过设置dispaly还是通过添加伪类:hidden来进行的控制，都可以使用其中一种方式进行判断。即：如果元素是通过添加伪类实现的隐藏，依旧可以通过display来进行判断

<div class="wrap :hidden">
	我是一个元素，来判断我是否是可见的
</div>
           

function showDisplay(){
	alert($(".wrap").css("display"));
}