Stellen Sie mehrere Attribute mit JavaScript in einem Element ein

Attribute definieren zusätzliche Merkmale oder Eigenschaften eines HTML -Elements wie Farbe, Breite, Höhe usw. Um dem Element ein Attribut zu geben, Namenswertepaare, wie z. B. “Name = Wert”Werden verwendet, wenn der Wert des Attributs in Anführungszeichen eingeschlossen sein sollte. Um den Wert eines Attributs auf dem angegebenen Element festzulegen, verwenden Sie also das “Element.setAttribute ()" Methode.

In diesem Beitrag wird die Prozedur veranschaulicht.

So setzen Sie mehrere Attribute in einem Element mit JavaScript fest?

Um mehrere Attribute in einem Element gleichzeitig 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 “Objekt.Schlüssel()Die Methode setzen Sie dann alle Attribute auf dem angegebenen HTML -Element mit dem "setAttribute ()" Methode.

Syntax

Die angegebene Syntax wird für die Methode setAttribute () verwendet:

Element.setAttribute (attrname, attrValue);

Die obige Syntax enthält zwei Parameter: “Name" Und "Wert”.

• “AttrnameIst der Name des neuen Attributs.
• “AttrValueIst 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 das Objekt.Keys () Methode:

Objekt.Schlüssel (Objekt)

Es gibt eine Reihe eines bestimmten Objekts zurück.

Beispiel 1: Legen Sie mehrere Attribute in einem Element mit der Methode foreach () ein

Erstellen Sie zunächst ein Element in der HTML -Datei:

LinuxHint

Derzeit sieht die Webseite so aus:

Erstellen Sie im JavaScript -Code zunächst ein mit dem Namen benannter Objekt “ElementAttributes”Und fügen Sie die Attribute mit Namen und Werten zum Objekt hinzu. Hier fügen wir das Style -Attribut, den Namen des Elements und die Deaktivierungseigenschaft für das Button -Element hinzu:

const elementattributes =
Stil: 'Hintergrundfarbe: RGB (153, 28, 49); Farbe weiß;',
Name: 'LinuxButton' ',
Behinderte: ",
;

Definieren Sie nun eine Funktion namens “setMultipleattributeOnelement"Wo rufen Sie zuerst die" an "Objekt.Schlüssel()Methode, um das Array der Tasten des Objekts zu erhalten und dann die zu verwenden “für jede()Methode, um das Array durchzusetzen und schließlich die “zu nennensetAttribute ()Methode zum Einstellen aller definierten Attribute auf dem angegebenen HTML -Element.

Funktion SetMultipattributeOnelement (Elem, Elemattributes)
Objekt.Schlüssel (ElementAttributes).foreach (Attribute =>
Elem.setAttribute (Attribut, Elemattributes [Attribut]);
);

Abrufen Sie die Taste mit der zugewiesenen ID mit Hilfe des “abGetElementById ()" Methode:

const button = dokument.getElementById ('Button');

Rufen Sie die definierte Funktion auf “setMultipleattributeOnelementUnd übergeben Sie das Element als erstes Argument und das Objekt der Attribute als zweites Argument:

setMultipleTtributeOnelement (Taste, ElementAttributes);

Die Ausgabe zeigt, dass die mehrere Attribute einer Taste erfolgreich hinzugefügt werden:

Sie können auch mehrere Attribute für ein Element festlegen, ohne ein separates Objekt für die Attribute zu erstellen. Folgen Sie dazu dem folgenden Beispiel.

Beispiel 2: Setzen Sie mehrere Attribute in einem Element mit für die Schleife mit setAttribute () -Methode auf ein Element ein

Definieren Sie eine Funktion mit zwei Parametern in einer JavaScript -Datei und verwenden Sie eine für Schleife, um mehrere Attribute darin zu setzen, indem Sie die “aufrufen“setAttribute ()" Methode:

Funktion SetMultipattributeOnelement (Elem, Elemattributes)
für (lass mich in elemattributes)
Elem.setAttribute (i, elemattributes [i]);

Rufen Sie die Schaltfläche mit der zugewiesenen ID ab:

const button = dokument.getElementById ('Button');

Rufen Sie die definierte Funktion auf, indem Sie das Tastenelement und mehrere Attribute in Form von Namenswertepaaren übergeben:

setMultiPeTtributeOnelement (Button, "style": "Hintergrundfarbe: RGB (153, 28, 49); Farbe: weiß;", "Behindert": "", "Name": "LinuxButton");

Ausgang

Wir haben alle wesentlichen Informationen zum Einstellen der Mehrfachattribute in einem HTML -Element mit JavaScript zusammengestellt.

Abschluss

Das JavaScript vordefiniert setAttribute ()Die Methode wird verwendet, um einzelne oder mehrere Attribute für ein Element festzulegen. Erstellen Sie zuerst ein Objekt, das Attribute in Form von Namenswerten enthält. Holen Sie sich die Tasten von Objekten in einem Array mit der “Objekt.Schlüssel()Methode, dann alle Attribute auf den angegebenen Elementen mit der “festlegen“setAttribute ()" Methode. In diesem Beitrag haben wir das Verfahren veranschaulicht.