Heim  >  Artikel  >  Web-Frontend  >  So ändern Sie den Stil in JQuery

So ändern Sie den Stil in JQuery

青灯夜游
青灯夜游Original
2023-01-28 16:19:1410770Durchsuche

So ändern Sie den Stil von jquery: 1. Verwenden Sie css(), um einen neuen Stil für das angegebene Element festzulegen. Die Syntax „$(selector).css({“Attribute name 1“: „Attribute value 1“,“ Attributname 2: „Attributwert 2“, ...})“ 2. Verwenden Sie attr(), um den Stilattributwert des angegebenen Elements festzulegen. Die Syntax lautet „$(selector).attr(“style“, „Attributname 1: Attributwert 1; Attributname 2: Attributwert 3;...“)“.

So ändern Sie den Stil in JQuery

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6-Version, Dell G3-Computer.

Es gibt zwei Möglichkeiten, den Stil von jquery zu ändern:

  • Ändern Sie es mit der CSS()-Methode

  • Ändern Sie es mit der attr()-Methode

Methode 1: Verwenden Sie CSS ()-Methode

Die

css()-Methode kann ein oder mehrere Stilattribute des übereinstimmenden Elements festlegen.

Verwenden Sie einfach die Methode css(), um einen neuen Stil festzulegen

Syntax:

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

Beispiel:

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

So ändern Sie den Stil in JQuery

Methode 2: Verwenden Sie die Methode attr()

attr()-Methode zum Festlegen oder Zurückgeben der ausgewählte Der Attributwert des Elements.

Verwenden Sie einfach die Methode attr(), um den Stilattributwert des Elements festzulegen.

Grammatik:

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

Beispiel:

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

So ändern Sie den Stil in JQuery

[Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video]

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Stil in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn