Comment changer de style dans jquery-Questions et réponses frontales-php.cn

Comment changer de style dans jquery

青灯夜游

Libérer： 2023-01-28 16:19:14

original

10801 Les gens l'ont consulté

Comment changer le style de jquery : 1. Utilisez css() pour définir un nouveau style pour l'élément spécifié. La syntaxe "$(selector).css({"Nom de l'attribut 1": "Valeur de l'attribut 1", " Nom de l'attribut 2="Valeur de l'attribut 2",...})"; 2. Utilisez attr() pour définir la valeur de l'attribut de style de l'élément spécifié, la syntaxe est "$(selector).attr("style", "Nom d'attribut 1 : valeur d'attribut 1 ; nom d'attribut 2 : valeur d'attribut 3 ;...")".

Comment changer de style dans jquery

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

Il existe deux façons de changer le style de jquery :

Modifiez-le via la méthode css()
Modifiez-le via la méthode attr()

Méthode 1 : Utilisez le css () méthode

La méthode

css() peut définir un ou plusieurs attributs de style de l'élément correspondant.

Utilisez simplement la méthode css() pour définir un nouveau style

Syntaxe :

$(selector).css({"属性名1":"属性值1","属性名2":"属性值2",...})

Copier après la connexion

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.3.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("div").css({"color":"red","background-color":"papayawhip","font-size":"25px"});
				});
			});
		</script>
		<style>
			.tr1 {
				color: green;
			}
			.tr2 {
				color: red;
				background-color: blanchedalmond;
			}
		</style>
	</head>

	<body class="ancestors">
		<div style="color: yellow;background-color:powderblue;">欢迎来到PHP中文网！</div><br>
		<button>改变div元素的style样式</button>
	</body>

</html>

Copier après la connexion

Comment changer de style dans jquery

Méthode 2 : utilisez la méthode attr()

attr() pour définir ou renvoyer la valeur d'attribut sélectionnée de l'élément.

Utilisez simplement la méthode attr() pour définir la valeur de l'attribut de style de l'élément.

Grammaire :

$(selector).attr("style","属性名1:属性值1;属性名2:属性值3;...")

Copier après la connexion

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.3.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("div").attr("style", "color:pink;background-color:peru;font-size: 18px;");
				});
			});
		</script>
		<style>
			.tr1 {
				color: green;
			}
			.tr2 {
				color: red;
				background-color: blanchedalmond;
			}
		</style>
	</head>

	<body class="ancestors">
		<div style="color: red;background-color:papayawhip;">欢迎来到PHP中文网！</div><br>
		<button>改变div元素的style样式</button>
	</body>

</html>

Copier après la connexion

Comment changer de style dans jquery