Dieser Beitrag veranschaulicht das Verfahren zum Festlegen mehrerer Attribute für ein HTML-Element mithilfe von JavaScript.
Wie setze ich mehrere Attribute für ein Element mit JavaScript?
Um mehrere Attribute gleichzeitig für ein Element festzulegen, erstellen Sie zunächst ein Objekt mit den Attributnamen und -werten. Holen Sie sich eine Liste der Schlüssel des Objekts als Array mit dem „ Object.keys() “-Methode setzen Sie dann alle Attribute für das angegebene HTML-Element mit der „ setAttribute() ' Methode.
Syntax
Die angegebene Syntax wird für die Methode setAttribute() verwendet:
Element. setAttribut ( attrName, attrWert ) ;
Die obige Syntax enthält zwei Parameter: „ Name ' und ' Wert “.
- „ attrName ” ist der Name des neuen Attributs.
- „ attrValue ” ist der Wert des neuen Attributs.
- Diese Methode erstellt ein neues Attribut und weist ihm einen Wert zu. Wenn das angegebene Attribut bereits vorhanden ist, wird sein Wert aktualisiert.
Verwenden Sie die angegebene Syntax für die Methode Object.keys():
Objekt . Schlüssel ( Objekt )Es gibt ein Array eines gegebenen Objekts zurück.
Beispiel 1: Mehrere Attribute für ein Element mit der forEach()-Methode festlegen Mit der setAttribute()-Methode
Erstellen Sie zunächst ein Element in der HTML-Datei:
< Schaltflächen-ID = 'Taste' > LINUXHINWEIS Taste >Aktuell sieht die Webseite so aus:
Erstellen Sie im JavaScript-Code zunächst ein Objekt mit dem Namen „ elementAttribute “ und fügen Sie dem Objekt die Attribute mit Namen und Werten hinzu. Hier fügen wir das Attribut style, den Namen des Elements und die Eigenschaft disable für das Schaltflächenelement hinzu:
konst elementAttribute = {Stil : 'Hintergrundfarbe: rgb(153, 28, 49); Farbe weiß;' ,
Name : 'LinuxButton' ,
deaktiviert : '' ,
} ;
Definieren Sie nun eine Funktion mit dem Namen „ setMultipleAttributeonElement ” Wo zuerst anrufen die “ Object.keys() “-Methode zum Abrufen des Arrays der Objektschlüssel und verwenden Sie dann die „ für jeden() “-Methode, um das Array zu durchlaufen und schließlich die „ setAttribute() ”-Methode, um alle definierten Attribute für das angegebene HTML-Element festzulegen.
Funktion setMultipleAttributeonElement ( element, elementAttribute ) {Objekt . Schlüssel ( elementAttribute ) . für jeden ( Attribut => {
Element. setAttribut ( Attribut, elemAttributes [ Attribut ] ) ;
} ) ;
}
Rufen Sie die Schaltfläche mit ihrer zugewiesenen ID mit Hilfe des „ getElementById() ' Methode:
konst Taste = dokumentieren. getElementById ( 'Taste' ) ;Rufen Sie die definierte Funktion auf „ setMultipleAttributeonElement “ und übergeben Sie das Element als erstes Argument und das Objekt von Attributen als zweites Argument:
setMultipleAttributeonElement ( Schaltfläche, Elementattribute ) ;Die Ausgabe zeigt, dass die mehreren Attribute einer Schaltfläche erfolgreich hinzugefügt wurden:
Sie können einem Element auch mehrere Attribute zuweisen, ohne ein separates Objekt für die Attribute zu erstellen. Folgen Sie dazu dem folgenden Beispiel.
Beispiel 2: Legen Sie mehrere Attribute für ein Element mithilfe der for-Schleife mit der Methode setAttribute() fest
Definieren Sie eine Funktion mit zwei Parametern in einer JavaScript-Datei und verwenden Sie eine for-Schleife, um mehrere Attribute darin festzulegen, indem Sie die „ setAttribute() ' Methode:
Funktion setMultipleAttributeonElement ( element, elementAttribute ) {zum ( lassen Sie i in elemAttributes ) {
Element. setAttribut ( i, elemAttribute [ ich ] ) ;
}
}
Rufen Sie die Schaltfläche mit ihrer zugewiesenen ID ab:
konst Taste = dokumentieren. getElementById ( 'Taste' ) ;Rufen Sie die definierte Funktion auf, indem Sie das Schaltflächenelement und mehrere Attribute in Form von Name-Wert-Paaren übergeben:
setMultipleAttributeonElement ( Taste, { 'Stil' : 'Hintergrundfarbe: rgb(153, 28, 49); Farbe: weiß;' , 'deaktiviert' : '' , 'Name' : 'LinuxButton' } ) ;Ausgabe
Wir haben alle wesentlichen Informationen zum Setzen mehrerer Attribute auf einem HTML-Element mit JavaScript zusammengestellt.
Fazit
Das JavaScript ist vordefiniert setAttribute() ”-Methode wird verwendet, um einzelne oder mehrere Attribute für ein Element festzulegen. Um mehrere Attribute für ein Element festzulegen, erstellen Sie zunächst ein Objekt, das Attribute in Form von Namen-Werten enthält. Holen Sie sich die Schlüssel von Objekten in einem Array mit dem „ Object.keys() “-Methode, dann setzen Sie alle Attribute auf die angegebenen Elemente mit der „ setAttribute() ' Methode. In diesem Beitrag haben wir das Verfahren zum Festlegen mehrerer Attribute für ein HTML-Element mithilfe von JavaScript veranschaulicht.