Maison  >  Article  >  interface Web  >  Comment modifier l'attribut de style dans jquery pour masquer des éléments

Comment modifier l'attribut de style dans jquery pour masquer des éléments

青灯夜游
青灯夜游original
2022-05-17 19:44:413068parcourir

Deux méthodes de masquage : 1. Utilisez css() pour contrôler le style d'affichage, la syntaxe est "element object.css('display','none')" 2. Utilisez attr() pour contrôler le style d'affichage, le la syntaxe est "element object.attr ('style','display:none')".

Comment modifier l'attribut de style dans jquery pour masquer des éléments

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

Deux façons de modifier les attributs de style dans jquery pour masquer des éléments

  • Méthode css()

  • Méthode attr()

1. Utilisez la méthode css()

cs. s ( ) pour contrôler le style d'affichage ou de visibilité, syntaxe :

元素对象.css('display','none');//隐藏
元素对象.css('visibility','hidden');//元素隐藏

Exemple :

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
			.start{
				color: peru;
			}
		</style>
		<script>
			$(document).ready(function() {

				$("button").click(function() {
					$("p").css(&#39;display&#39;,&#39;none&#39;);//隐藏
					$("div").css(&#39;visibility&#39;,&#39;hidden&#39;);//元素隐藏
				});
			});
		</script>
	</head>
	<body>

		<p>一个p元素</p>
		<div>一个div元素</div>
		<p>一个p元素</p>
		<button>隐藏元素</button>
	</body>
</html>

Comment modifier lattribut de style dans jquery pour masquer des éléments

2. Utilisez la méthode attr()

Utilisez attr() pour contrôler le style d'affichage ou de visibilité, syntaxe :

元素对象.attr(&#39;style&#39;,&#39;display:none&#39;);//隐藏
元素对象.attr(&#39;style&#39;,&#39;visibility:hidden&#39;);//元素隐藏

Exemple :

$(document).ready(function() {
	$("button").click(function() {
		$("p").attr(&#39;style&#39;,&#39;display:none&#39;);//隐藏
		$("div").attr(&#39;style&#39;,&#39;visibility:hidden&#39;);//元素隐藏
	});
});

Comment modifier lattribut de style dans jquery pour masquer des éléments

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end

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