Attribut in JavaScript ändern
In diesem Tutorial wird das Ändern des Attributs eines Elements mit der Funktion setAttribute() in JavaScript erläutert.
Ändern Sie das Attribut eines Elements mit der Funktion setAttribute() in JavaScript
Wir können das Attribut eines HTML-Elements mit der Funktion setAttribute() in JavaScript ändern.
Angenommen, das HTML-Element hat bereits ein Attribut. In diesem Fall aktualisiert die Funktion setAttribute() das vorherige Attribut, und wenn das HTML-Element kein Attribut hat, fügt die Funktion setAttribute() dem Element ein neues Attribut hinzu.
Die grundlegende Syntax der Funktion setAttribute() ist unten.
element.setAttribute(name, value)
Die Funktion setAttribute() akzeptiert zwei Argumente, name und value, wie in der obigen Syntax gezeigt. Das Argument name ist eine Zeichenfolge, die den Namen des Attributs wie class und id angibt.
Das Argument value der Funktion setAttribute() ist ebenfalls ein String und wird verwendet, um den Wert des Arguments zu setzen, dessen Name als erstes Argument angegeben wird. Die Funktion setAttribute() gibt keinen Wert zurück.
Das element in der obigen Syntax ist das Element, dessen Attribut wir setzen wollen. Wir können ein HTML-Element in JavaScript mit vielen Funktionen wie querySelector(), getElementById(), getElementByClassName() und vielen mehr erhalten.
Die grundlegende Syntax aller oben genannten Funktionen ist unten angegeben.
const MyElement = document.querySelector(ElementName);
const MyElement = document.getElementById(ElementID);
const MyElement = document.getElementByClassName(ElementClassName);
In der obigen Syntax akzeptiert die Funktion querySelector() einen Zeichenfolgenwert, der den Namen des Elements wie div, h1 usw. angibt. Die Funktion getElementById() akzeptiert einen Zeichenfolgenwert, der die ID des Elements angibt Wir können jedem HTML-Element mit dem Schlüsselwort id zuweisen.
Die Funktion getElementByClassName() akzeptiert einen String-Wert, der den Klassennamen des Elements angibt, den wir jedem HTML-Element mit dem Schlüsselwort class zuweisen können. Alle oben genannten Funktionen geben einzelne und mehrere Elemente zurück, wenn die Eingabezeichenfolge der Funktion mit mehreren HTML-Elementen verwendet wird.
Bei mehreren Elementen ändert sich das Attribut aller Elemente. Wenn wir das Attribut eines einzelnen Elements setzen wollen, müssen wir jedem Element einen anderen Klassennamen oder eine andere ID geben.
Lassen Sie uns zum Beispiel das Attribut class eines Elements mit der Funktion setAttribute() setzen. Siehe Code unten.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.test1 {
font-size: 50px;
color: blue;
}
.test2 {
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<h1 id="id1" class="test1">set attribute</h1>
<script>
const MyElement = document.getElementById("id1");
MyElement.setAttribute("class", "test2");
</script>
</body>
</html>
Ausgang:
Im obigen Code haben wir das Tag h1 verwendet, um einen Text anzuzeigen, und dem Element eine ID und einen Klassennamen hinzugefügt. Wir haben das Tag style verwendet, um zwei Stile zu erstellen, mit denen wir das Attribut des Tags h1 ändern werden.
Wir haben das script-Tag innerhalb des body-Tags verwendet, um JavaScript-Code zu schreiben. Innerhalb des Tags script haben wir die Funktion getElementById() verwendet, um das Element anhand seiner ID abzurufen, und wir haben seine Klasse von test1 in test2 geändert, indem wir die Funktion setAttribute() verwendet haben.
Wir können in der obigen Ausgabe sehen, dass die Farbe und Schriftgröße des Textes geändert wurden.
Beide Stile, test1 und test2, beinhalten unterschiedliche Farben und Schriftgrössen. Innerhalb des obigen Codes haben wir dem Tag h1 den Klassennamen test1 gegeben, der blaue Farbe enthält, aber wir haben das Klassenattribut innerhalb des Tags script in test2 geändert, weshalb die Farbe von der Ausgang ist rot.
Im obigen Code haben wir das Attribut class geändert, aber wir können auch andere Attribute wie das Attribut id oder name eines Elements ändern. Wir können die Funktion getAttribute() verwenden, um das Attribut eines Elements zu erhalten, und wir können die Funktion removeAttribute() verwenden, um das vorhandene Attribut eines Elements zu entfernen.
