Maison  >  Article  >  interface Web  >  Comment masquer des éléments en position à l'aide de jquery

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

青灯夜游
青灯夜游original
2022-04-20 16:50:431880parcourir

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

.

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 0Comment 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>


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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn