Heim > Web-Frontend > Front-End-Fragen und Antworten > So ändern Sie mehrere CSS-Attribute mit JQuery

So ändern Sie mehrere CSS-Attribute mit JQuery

青灯夜游
Freigeben: 2022-06-02 15:33:51
Original
2685 Leute haben es durchsucht

Methode ändern: 1. Verwenden Sie css(), um einen neuen Wert für das Stilattribut festzulegen. Die Syntax lautet „element object.css({“Attributname“: „Neuer Wert“, „Attributname“: „Neuer Wert“ ...}) „; 2. Verwenden Sie attr(), um einen neuen Wert festzulegen. Die Syntax lautet „element object.attr(“style“,„Attributname: neuer Wert, Attributname: neuer Wert ...“)“ .

So ändern Sie mehrere CSS-Attribute mit JQuery

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

Zwei Möglichkeiten, mehrere CSS-Attribute mit jquery zu ändern

  • Verwenden Sie css(), um mehrere Attribute zu ändern

  • Verwenden Sie attr(), um mehrere Attribute zu ändern

1. Verwenden Sie css() zum Ändern Die Methode „Mehrere Eigenschaften“

css() gibt eine oder mehrere Stileigenschaften des übereinstimmenden Elements zurück oder legt sie fest.

Legen Sie mehrere CSS-Eigenschafts-/Wertpaare fest.

$(selector).css({"属性名1":"新值","属性名2":"新值",...})
Nach dem Login kopieren

Legen Sie „Name/Wert-Paar“-Objekte als Stileigenschaften für alle passenden Elemente fest.

Dies ist die beste Möglichkeit, eine große Anzahl von Stilattributen für alle passenden Elemente festzulegen.

Beispiel: Ändern Sie das Farbattribut und das Schriftgrößenattribut

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("div").css({"color":"red","font-size":"20px"}); 
					
				});
			});
		</script>
	</head>

	<body class="ancestors">
		<div style="color: black;font-size: 14px;">测试文本</div>
		<button>改变color属性和font-size属性</button>
	</body>

</html>
Nach dem Login kopieren

So ändern Sie mehrere CSS-Attribute mit JQuery

2. Verwenden Sie attr(), um mehrere Attribute zu ändern. Die Methode attr() kann die Attribute und Werte des ausgewählten Elements festlegen .

$(selector).attr("style","属性名:新值,属性名:新值,...");
Nach dem Login kopieren

Wenn attr() verwendet wird, um das Stilattribut auf ein Element festzulegen, ist der Wert des Attributs ein oder mehrere Stile.

Beispiel:

$(document).ready(function() {
	$("button").on("click", function() {
		$("div").attr("style","color: green;font-size: 20px;"); 
		
	});
});
Nach dem Login kopieren

【Empfohlenes Lernen: So ändern Sie mehrere CSS-Attribute mit JQueryjQuery-Video-Tutorial

,

Web-Frontend-Video

Das obige ist der detaillierte Inhalt vonSo ändern Sie mehrere CSS-Attribute mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage