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

通过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"));
}