Comment masquer des éléments en position à l'aide de jquery-Questions et réponses frontales-php.cn

Comment masquer des éléments en position à l'aide de jquery

青灯夜游

Libérer： 2022-04-20 16:50:43

original

1916 Les gens l'ont consulté

Méthode d'implémentation : 1. Utilisez css() pour ajouter un style de visibilité à l'élément et le rendre invisible. La syntaxe est "element object.css('visibility','hidden');"; ) pour définir la transparence de l'élément est 0, la syntaxe est "element object.css('opacity',0)".

Comment masquer des éléments en position à l'aide de jquery

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

Il existe deux manières d'implémenter des éléments masqués occupant une position :

Ajouter le style visibilité : caché; à l'élémentvisibility: hidden;样式
给元素添加opacity: 0

Ajouter le style opacité : 0 à l'élément

Dans jquery, vous pouvez utiliser la méthode css() pour obtenir l'effet ci-dessus :

1 Utilisez css() pour ajouter un style de visibilité à l'élément et le définir sur invisible Comment masquer des éléments en position à laide de jquery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$(".visibility").css("visibility","hidden");
				});
			});
		</script>
	</head>
	<body>
		<div>正常显示元素</div>
		<div class="visibility">隐藏元素</div>
		<div>正常显示元素</div>
		<br>
		<button>占位置隐藏元素</button>

	</body>
</html>

Copier après la connexion

Instructions :

attribut de visibilité Spécifie si l'élément est visible.

Cet attribut précise s'il faut afficher la boîte d'élément générée par un élément. Cela signifie que l’élément occupe toujours son espace d’origine, mais peut être totalement invisible. L'effondrement des valeurs est utilisé dans les tableaux pour supprimer des colonnes ou des lignes de la disposition du tableau.

Méthode 2 : Utilisez css() pour définir la transparence de l'élément sur 0 Comment masquer des éléments en position à laide de jquery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$(".opacity").css(&#39;opacity&#39;,0);
				});
			});
		</script>
	</head>
	<body>
		<div>正常显示元素</div>
		<div class="opacity">隐藏元素</div>
		<div>正常显示元素</div>
		<br>
		<button>占位置隐藏元素</button>

	</body>
</html>

Copier après la connexion

Description : L'attribut

opacity signifie définir la transparence d'un élément. Il n’est pas conçu pour modifier le cadre de délimitation d’un élément.

Cela signifie que définir l'opacité sur 0 masque uniquement visuellement l'élément. L'élément lui-même occupe toujours sa propre position et contribue à la mise en page de la page Web. Ceci est similaire à la visibilité : caché ci-dessus.

Recommandations de didacticiel associées : 🎜Tutoriel vidéo jQuery🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!