jquery怎麼檢測元素是否隱藏
- 青灯夜游原創
- 2022-12-16 16:09:444066瀏覽
3種方法：1、使用css()偵測元素display屬性的值是否為none，如果是則隱藏了，語法「元素物件.css('display')=='none'」； 2.利用is()方法和「:hidden」選擇器，傳回值為真則元素是隱藏的，語法「元素物件.is(":hidden")」；3、利用is()方法和「:visible ”選擇器，語法“!(元素物件.is(":visible"))”。
本教學操作環境：windows7系統、jquery3.6.1版本、Dell G3電腦。
jquery偵測元素是否隱藏的幾種方法
#方法1：使用css()偵測display屬性的值是否為none
css()可以傳回被選元素的一個或多個樣式屬性。
只需要使用css()取得display屬性的值，判斷該值是否為none即可偵測該元素是否隱藏
是none，則該元素隱藏
不是none，則該元素不隱藏
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
if ($("#hide").css('display')=='none') {
console.log("#hide元素隐藏了");
} else {
console.log("#hide元素没隐藏，是可见的");
}
if ($("#show").css('display')=='none') {
console.log("#show元素隐藏了");
} else {
console.log("#show元素没隐藏，是可见的");
}
});
});
</script>
</head>
<body>
<div id="hide" style="display:none;">
#hide元素-我是隐藏的内容，你看不到我。
</div>
<div id="show" style="display:block;">
#show元素-我是显示的内容，你看的到我。
</div><br>
<button>检查元素是否隐藏</button>
</body>
</html>
#方法2：利用is ()方法和「:hidden」選擇器偵測
is() 方法用於查看所選的元素是否符合選擇器。
:hidden 選擇器選取隱藏的元素。以下幾種情況的元素是隱藏元素：
設定為display:none
有type="hidden" 的表單元素
隱藏的父元素（這也會隱藏子元素）
#偵測語法：
元素对象.is(":hidden")傳回值為真，則元素是隱藏的；傳回值為假則不是隱藏的。
範例
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
if ($("#hide").is(":hidden")) {
console.log("#hide元素隐藏了");
} else {
console.log("#hide元素没隐藏，是可见的");
}
if ($("#show").is(":hidden")) {
console.log("#show元素隐藏了");
} else {
console.log("#show元素没隐藏，是可见的");
}
});
});
</script>
</head>
<body>
<div id="hide" style="display:none;">
#hide元素-我是隐藏的内容，你看不到我。
</div>
<div id="show" style="display:block;">
#show元素-我是显示的内容，你看的到我。
</div><br>
<button>检查元素是否隐藏</button>
</body>
</html>
#方法3：利用is()方法和「:visible」選擇器來偵測
is() 方法用於查看選擇的元素是否符合選擇器。
:visible 選擇器選取目前可見的每個元素。除以下幾種情況之外的元素即是可見元素：
設定為display:none
有type="hidden"的表單元素
width 和height 設定為0
隱藏的父元素（這也會隱藏子元素）
偵測語法：
!(元素对象.is(":visible"))傳回值為真，則元素是隱藏的；傳回值為假則不是隱藏的。
範例：
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
if (!($("#hide").is(":visible"))) {
console.log("#hide元素隐藏了");
} else {
console.log("#hide元素没隐藏，是可见的");
}
if (!($("#show").is(":visible"))) {
console.log("#show元素隐藏了");
} else {
console.log("#show元素没隐藏，是可见的");
}
});
});
</script>
</head>
<body>
<div id="hide" style="display:none;">
#hide元素-我是隐藏的内容，你看不到我。
</div>
<div id="show" style="display:block;">
#show元素-我是显示的内容，你看的到我。
</div><br>
<button>检查元素是否隐藏</button>
</body>
</html>
#【推薦學習：jQuery影片教學、web前端視頻】
以上是jquery怎麼檢測元素是否隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！