Comment détecter si un élément est caché dans jquery-Questions et réponses frontales-php.cn

Comment détecter si un élément est caché dans jquery

青灯夜游

Libérer： 2022-12-16 16:09:44

original

4086 Les gens l'ont consulté

3 méthodes : 1. Utilisez css() pour détecter si la valeur de l'attribut d'affichage de l'élément est aucune. Si c'est le cas, masquez-la. La syntaxe est "element object.css('display')=='none'" ; 2. Utilisez la méthode is() et le sélecteur ":hidden", si la valeur de retour est vraie, l'élément est masqué, la syntaxe est "element object.is(":hidden"" 3. Utilisez la méthode is() ; méthode et le sélecteur ":visible", syntaxe "!(element object.is(":visible"))".

Comment détecter si un élément est caché dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.1, ordinateur Dell G3.

Plusieurs méthodes permettant à jquery de détecter si un élément est masqué

Méthode 1 : Utilisez css() pour détecter si la valeur de l'attribut d'affichage est aucune

css() peut renvoyer un ou plusieurs styles de la propriété de l'élément sélectionné.

Il vous suffit d'utiliser css() pour obtenir la valeur de l'attribut d'affichage et de déterminer si la valeur est nulle pour détecter si l'élément est masqué

Si ce n'est le cas, l'élément est masqué
S'il n'est pas nul, l'élément n'est pas masqué

<!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(&#39;display&#39;)==&#39;none&#39;) {
						console.log("#hide元素隐藏了");

					} else {
						console.log("#hide元素没隐藏，是可见的");
					}
					if ($("#show").css(&#39;display&#39;)==&#39;none&#39;) {
						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>

Copier après la connexion

Comment détecter si un élément est caché dans jquery

Méthode 2 : Utilisez la méthode is() et la détection du sélecteur ":hidden"

is() est utilisée pour vérifier si ce n'est pas le cas. l'élément sélectionné correspond au sélecteur.

: le sélecteur caché sélectionne les éléments cachés. Les éléments dans les situations suivantes sont des éléments masqués :

Défini pour afficher : aucun
Éléments de formulaire avec type="hidden"
Éléments parents cachés (cela masquera également les éléments enfants)

Détection syntaxe :

元素对象.is(":hidden")

Copier après la connexion

Si la valeur de retour est vraie, l'élément est masqué ; si la valeur de retour est fausse, il n'est pas masqué.

Exemple

<!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>

Copier après la connexion

Comment détecter si un élément est caché dans jquery

Méthode 3 : Utiliser la méthode is() et la détection du sélecteur ":visible"

is() est utilisée pour voir si l'élément sélectionné correspond au sélecteur.

: le sélecteur visible sélectionne chaque élément actuellement visible. Les éléments autres que les éléments suivants sont visibles :

est défini sur display:aucun
Éléments de formulaire avec type="hidden"
la largeur et la hauteur sont définies sur 0
Élément parent caché ( cela masque également les éléments enfants)

Syntaxe de détection :

!(元素对象.is(":visible"))

Copier après la connexion

La valeur de retour est vraie, l'élément est masqué ; la valeur de retour est fausse, il n'est pas masqué.

Exemple :

<!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>

Copier après la connexion

Comment détecter si un élément est caché dans jquery