jquery에서 요소가 숨겨져 있는지 확인하는 방법
- 青灯夜游원래의
- 2022-12-16 16:09:444115검색
3가지 방법: 1. css()를 사용하여 요소의 표시 속성 값이 없음인지 감지합니다. 그렇다면 구문은 "element object.css('display')=='none'입니다. "; 2. is() 메소드와 ":hidden" 선택기를 사용합니다. 반환 값이 true이면 요소가 숨겨지고 구문은 "element object.is(":hidden")"입니다. 3. is를 사용합니다. () 메소드와 ":visible" 선택기, 구문 "!(element object.is(":visible"))".
이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6.1 버전, Dell G3 컴퓨터.
요소가 숨겨져 있는지 여부를 감지하는 jquery의 여러 가지 방법
방법 1: css()를 사용하여 표시 속성 값이 없음인지 여부를 감지합니다.
css()는 하나 이상의 스타일을 반환할 수 있습니다. 선택한 요소 속성의
css()를 사용하여 표시 속성 값을 가져오고 값이 없음인지 확인하면 요소가 숨겨져 있는지 여부를 감지할 수 있습니다.
값이 없으면 요소가 숨겨집니다.
없음이 아니면 요소가 숨겨지지 않습니다. -
<!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>
is() 메서드를 사용하여 여부를 확인합니다. 선택한 요소가 선택기와 일치합니다.
:hidden selector는 숨겨진 요소를 선택합니다. 다음 상황의 요소는 숨겨진 요소입니다.
- 표시로 설정:none
- type="hidden"인 양식 요소
- 숨겨진 상위 요소(이렇게 하면 하위 요소도 숨겨짐)
- 감지 구문:
元素对象.is(":hidden")
- 반환 값이 true이면 요소가 숨겨지고, 반환 값이 false이면 숨겨지지 않습니다.
- 예
<!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>
is() 메서드는 선택한 요소가 선택기와 일치하는지 확인하는 데 사용됩니다.
:visible 선택기는 현재 표시되는 모든 요소를 선택합니다. 다음 이외의 요소는 표시되는 요소입니다.
- 는 display:none으로 설정됩니다.
- type="hidden"인 양식 요소
- 너비와 높이는 0
- 으로 설정됩니다. 숨겨진 상위 요소( 이는 하위 요소도 숨깁니다.)
- 탐지 구문:
!(元素对象.is(":visible"))
- 반환 값은 true이고 요소는 숨겨집니다. 반환 값은 false이며 숨겨지지 않습니다.
- 예:
<!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에서 요소가 숨겨져 있는지 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!