Maison  >  Article  >  interface Web  >  Comment supprimer une partie de style de jquery

Comment supprimer une partie de style de jquery

青灯夜游
青灯夜游original
2022-09-09 19:05:345592parcourir

Deux méthodes pour supprimer le style : 1. Utilisez la fonction removeAttr() pour supprimer le style défini par l'attribut style, la syntaxe est "$(selector).removeAttr("style");". 2. Utilisez la fonction empty() pour effacer le contenu de la balise de style et supprimer le style de la balise de style. La syntaxe est "$("style").empty();".

Comment supprimer une partie de style de jquery

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

En HTML, les styles de style sont divisés en deux situations :

  • 1. Le style contenu dans l'attribut style

    L'attribut style est l'attribut principal du HTML et est utilisé pour spécifier le style en ligne (style en ligne) pour les éléments. .

    L'attribut style remplacera les autres styles globaux, tels que ceux définis dans l'élément

  • 2. Le style contenu dans la balise style

    La balise style définit les informations de style du document HTML.

    Dans l'élément style, vous pouvez spécifier comment le document HTML est rendu dans le navigateur.

JQuery propose différentes méthodes de suppression pour différentes situations.

1. Utilisez la méthode jquery removeAttr() pour supprimer l'attribut de style

la méthoderemoveAttr() est utilisée pour supprimer les attributs des éléments sélectionnés.

Syntaxe :

$(selector).removeAttr(attribute)

attribut : obligatoire. Spécifie les attributs à supprimer de l'élément spécifié.

Exemple : supprimez l'attribut de style du premier élément p

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p:first").removeAttr("style");
				});
			});
		</script>

	</head>

	<body>
		<h1>这是一个大标题</h1>
		<p style="font-size: 120%;color: blue;background-color: yellow;">这是一个段落。</p>
		<p style="font-size: 120%;color: blue;background-color: yellow;">这是另一个段落。</p>
		<button>移除第一个 p 元素的style属性</button>
	</body>

</html>

Comment supprimer une partie de style de jquery

2 Utilisez la méthode jquery empty() pour effacer le contenu de la méthode style tag

empty() pour supprimer tous les enfants du. les nœuds et le contenu des éléments sélectionnés, mais les éléments sélectionnés ne seront pas supprimés.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("style").empty();
				});
			});
		</script>
		<style>
			h1{
				color: coral;
			}
			p{
				font-size: 120%;
				color: blue;
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<h1>这是一个大标题</h1>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>
		<button>清空style标签样式</button>
	</body>

</html>

Comment supprimer une partie de style de jquery

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo de développement 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