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

青灯夜游
Libérer: 2022-06-08 16:34:14
original
3081 Les gens l'ont consulté

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');//元素隐藏
Copier après la connexion

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>
Copier après la connexion

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;);//元素隐藏
Copier après la connexion

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;);//元素隐藏
	});
});
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal