Der setAttribute() Die Methode wird zum Festlegen oder Hinzufügen eines Attributs zu einem bestimmten Element verwendet und stellt ihm einen Wert bereit. Wenn das Attribut bereits vorhanden ist, wird nur der Wert des Attributs festgelegt oder geändert. Wir können also auch das verwenden setAttribute() Methode, um den Wert des vorhandenen Attributs zu aktualisieren. Wenn das entsprechende Attribut nicht vorhanden ist, wird ein neues Attribut mit dem angegebenen Namen und Wert erstellt. Diese Methode gibt keinen Wert zurück. Der Attributname wird automatisch in Kleinbuchstaben umgewandelt, wenn wir ihn für ein HTML-Element verwenden.
Obwohl wir das hinzufügen können Stil Attribut mit dem setAttribute() Methode, es wird jedoch empfohlen, diese Methode nicht für das Styling zu verwenden. Zum Hinzufügen von Stilen können wir die Eigenschaften des Stilobjekts verwenden, die den Stil effektiv ändern. Mit dem folgenden Code kann es klargestellt werden.
Falscher Weg
Es wird empfohlen, es nicht zum Ändern des Stils zu verwenden.
element.setAttribute('style', 'background-color: blue;');
Der richtige Weg
Im Folgenden wird beschrieben, wie Sie den Stil richtig ändern können.
element.setAttribute.backgroundColor = 'blue';
Um den Wert eines Attributs zu erhalten, können wir verwenden getAttribute() Methode, und um ein bestimmtes Attribut aus einem Element zu entfernen, können wir die verwenden removeAttribute() Methode.
Wenn wir ein boolesches Attribut hinzufügen, z deaktiviert , dann wird es, egal welchen Wert es hat, immer als betrachtet WAHR . Wenn wir den Wert des booleschen Attributs auf setzen müssen FALSCH , müssen wir das gesamte Attribut mit dem entfernen removeAttribute() Methode .
Syntax
element.setAttribute(attributeName, attributeValue)
Die Argumente dieser Methode sind nicht optional. Bei Verwendung dieser Methode müssen beide Parameter enthalten sein. Die Parameterwerte dieser Methode sind wie folgt definiert.
Parameterwerte
Attributname: Es ist der Name des Attributs, das wir einem Element hinzufügen möchten. Es kann nicht leer gelassen werden; d. h. es ist nicht optional.
Attributwert: Es ist der Wert des Attributs, das wir einem Element hinzufügen. Es ist auch kein optionaler Wert.
Lassen Sie uns verstehen, wie man es benutzt setAttribute() Veranschaulichen Sie die Methode anhand einiger Abbildungen.
Beispiel 1
In diesem Beispiel fügen wir a hinzu href Attribut mit einem Wert von 'https://www.javatpoint.com/' zum taggen mit id = 'link' .
JavaScript setAttribute() method function fun() { document.getElementById('link').setAttribute('href', 'https://www.javatpoint.com/'); } <h2> It is an example of adding an attribute using the setAttribute() method. </h2> <a id="link"> javaTpoint.com </a> <p> Click the follwing button to see the effect. </p> Add attribute Testen Sie es jetzt Ausgabe
Nach der Ausführung des obigen Codes lautet die Ausgabe:
Wir können sehen, dass der Link vor dem Klicken auf die angegebene Schaltfläche nicht erstellt wird. Nach dem Klicken auf die Schaltfläche lautet die Ausgabe:
Jetzt können wir sehen, dass der Link erstellt wurde.
Beispiel2
In diesem Beispiel aktualisieren wir den Wert eines vorhandenen Attributs mithilfe von setAttribute() Methode. Hier konvertieren wir ein Textfeld in eine Schaltfläche, indem wir den Wert von ändern Typ Attribut von Text Zu Taste .
Wir müssen auf die angegebene Schaltfläche klicken, um den Effekt zu sehen.
JavaScript setAttribute() method function fun() { document.getElementById('change').setAttribute('type', 'button'); } <h2> It is an example to update an attribute's value using the setAttribute() method. </h2> <p> Click the follwing button to see the effect. </p> Change Testen Sie es jetzt Ausgabe
Nach der Ausführung des obigen Codes lautet die Ausgabe:
Nach dem Klicken auf die Schaltfläche lautet die Ausgabe:
Beispiel3
Hier fügen wir ein boolesches Attribut hinzu deaktiviert um die angegebene Schaltfläche zu deaktivieren. Wenn wir den Wert des festlegen deaktiviert Wenn Sie das Attribut auf eine leere Zeichenfolge setzen, wird es automatisch auf „true“ gesetzt, wodurch die Schaltfläche deaktiviert wird.
JavaScript setAttribute() method function fun() { document.getElementById('btn').setAttribute('disabled', ''); } <h2> Example of the setAttribute() method. </h2> <p> Click the following button to see the effect </p> Click me Testen Sie es jetzt Ausgabe
Nach der Ausführung des obigen Codes lautet die Ausgabe:
SQL-Klauseln
Nach dem Klicken auf die Schaltfläche lautet die Ausgabe:
