So ändern Sie den Klassennamen des dom-Elements in jquery-Front-End-Fragen und Antworten-php.cn

So ändern Sie den Klassennamen des dom-Elements in jquery

青灯夜游

Freigeben： 2022-05-30 14:32:28

Original

1652 Leute haben es durchsucht

Zwei Änderungsmethoden: 1. Verwenden Sie attr(), um den Wert des Klassenattributs zu ändern. Die Syntax lautet „dom element object.attr(„class“, „new class name“)“; 2. Entfernen Sie die alte Klasse und Fügen Sie eine neue Klasse hinzu, Syntax „dom element object.removeClass(“alter Klassenname“).addClass(“neuer Klassenname“)“.

So ändern Sie den Klassennamen des dom-Elements in jquery

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

jquery-Methode zum Ändern des Klassennamens von Dom-Elementen

Methode 1: Verwenden Sie attr() direkt, um den Wert des Klassenattributs zu ändern. Die Methode attr() kann den Attributwert des ausgewählten Elements festlegen Element.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function(){
				$("button").click(function(){
				  $("p:first").attr("class","intro2");
				});
			});
			</script>
		<style type="text/css">
			.intro1 {
				font-size: 120%;
				color: red;
			}
			.intro2 {
				font-size: 120%;
				color: green;
			}
		</style>
	</head>
	<body>

		<h1>这是一个段落标题</h1>
		<p class="intro1">这是一个段落</p>
		<p> 这是另外一个段落</p>
		<button>修改p元素的 "intro1" 类</button>

	</body>
</html>

Nach dem Login kopieren

So ändern Sie den Klassennamen des dom-Elements in jquery Methode 2: Verwenden Sie „removeClass()“ und „addClass()“

Verwenden Sie zuerst „removeClass()“, um die angegebene Klasse zu entfernen

Dann verwenden Sie „addClass()“, um eine neue Klasse hinzuzufügen

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function(){
				$("button").click(function(){
				  $("p:first").removeClass("intro1").addClass("intro2");
				});
			});
			</script>
		<style type="text/css">
			.intro1 {
				font-size: 120%;
				color: red;
			}
			.intro2 {
				font-size: 120%;
				color: green;
			}
		</style>
	</head>
	<body>

		<h1>这是一个段落标题</h1>
		<p class="intro1">这是一个段落</p>
		<p> 这是另外一个段落</p>
		<button>修改p元素的 "intro1" 类</button>

	</body>
</html>

Nach dem Login kopieren

【Empfohlenes Lernen: So ändern Sie den Klassennamen des dom-Elements in jquery jQuery-Video-Tutorial

Web-Frontend-Video】

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Klassennamen des dom-Elements in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!