Ustaw wiele atrybutów na elemencie za pomocą JavaScript

Atrybuty definiują dodatkowe funkcje lub właściwości elementu HTML, takie jak kolor, szerokość, wysokość i tak dalej. Aby podać atrybut elementowi, parom nazwy, takie jak „Nazwa = wartość”, Są używane tam, gdzie wartość atrybutu powinna być zamknięta w cudzysłowie. Aby ustawić wartość atrybutu na określonym elemencie, użyj „Element.setAttribute ()" metoda.

Ten post ilustruje procedurę ustawienia wielu atrybutów na elemencie HTML za pomocą JavaScript.

Jak ustawić wiele atrybutów na elemencie za pomocą JavaScript?

Aby jednocześnie ustawić wiele atrybutów na elemencie, najpierw utwórz obiekt z nazwami i wartościami atrybutów. Uzyskaj listę kluczy obiektu jako tablicę z „Obiekt.Klucze()„Metoda, zatem ustaw wszystkie atrybuty na określonym elemencie HTML za pomocą„setAttribute ()" metoda.

Składnia

Podana składnia jest używana dla metody setAttribute ():

element.setAttribute (attrname, attrValue);

Powyższa składnia zawiera dwa parametry: „nazwa" I "wartość".

• "attrname”To nazwa nowego atrybutu.
• "attrValue”To wartość nowego atrybutu.
• Ta metoda utworzy nowy atrybut i przypisuje go wartość. Jeśli określony atrybut już istnieje, jego wartość zostanie zaktualizowana.

Użyj podanej składni dla obiektu.Keys () Metoda:

Obiekt.klucze (obiekt)

Zwraca tablicę danego obiektu.

Przykład 1: Ustaw wiele atrybutów na elemencie za pomocą metody foreach () metodą setAttribute ()

Najpierw utwórz element w pliku HTML:

Linuxhint

Obecnie strona internetowa będzie wyglądać tak:

W kodzie JavaScript najpierw utwórz obiekt o nazwie „ElementAttributes”I dodaj atrybuty z nazwami i wartościami do obiektu. Tutaj dodamy atrybut stylu, nazwę elementu i właściwość Wyłącz dla elementu przycisku:

const elementAttributes =
Styl: „kolor tła: RGB (153, 28, 49); kolor biały;',
Nazwa: „Linuxbutton”,
wyłączony: ",
;

Teraz zdefiniuj funkcję o nazwie „setMultipleAttributeSonelement„Gdzie najpierw zadzwoń do„Obiekt.Klucze()”Metoda uzyskania szeregu kluczy obiektu, a następnie wykorzystania„dla każdego()„Metoda do iterowania przez tablicę i wreszcie wywołanie„setAttribute ()„Metoda ustawienia wszystkich zdefiniowanych atrybutów na określonym elemencie HTML.

funkcja setMultipleAttributeSonelement (Elem, Elemattributes)
Obiekt.klucze (elementAttributes).foreach (atrybut =>
Elem.setAttribute (atrybut, elemattributes [atrybut]);
);

Przyjdź przycisk za pomocą przypisanego identyfikatora za pomocą „getElementById ()" metoda:

const Button = Dokument.getElementById („przycisk”);

Wywołać zdefiniowaną funkcję „setMultipleAttributeSonelement”I przekazuj element jako pierwszy argument i obiekt atrybutów jako drugi argument:

setMultIpleAttributeSonelement (przycisk, elementAttributes);

Wyjście pokazuje, że z powodzeniem dodano wiele atrybutów przycisku:

Możesz także ustawić wiele atrybutów na elemencie bez tworzenia osobnego obiektu dla atrybutów. Aby to zrobić, postępuj zgodnie z poniższym przykładem.

Przykład 2: Ustaw wiele atrybutów na elemencie za pomocą pętli za pomocą metody setAttribute ()

Zdefiniuj funkcję z dwoma parametrami w pliku JavaScript i użyj pętli do ustawienia wielu atrybutów, wywołując „setAttribute ()" metoda:

funkcja setMultipleAttributeSonelement (Elem, Elemattributes)
dla (niech i w Elemattributes)
Elem.setAttribute (i, elemattributes [i]);

Pobrać przycisk za pomocą przypisanego identyfikatora:

const Button = Dokument.getElementById („przycisk”);

Wywołaj zdefiniowaną funkcję, przekazując element przycisku i wiele atrybutów w postaci par nazwy:

setMultIpleAttributeSonelement (przycisk, „styl”: „kolor tła: rgb (153, 28, 49); color: biały;”, „niepełnosprawny”: „”, „name”: „Linuxbutton”);

Wyjście

Skompilowaliśmy wszystkie niezbędne informacje związane z ustawieniem wielu atrybutów na elemencie HTML za pomocą JavaScript.

Wniosek

JavaScript predefiniowany setAttribute ()”Metoda jest używana do ustawienia pojedynczych lub wielu atrybutów dla elementu. Aby ustawić wiele atrybutów na elemencie, najpierw utwórz obiekt zawierający atrybuty w formie wartości nazwisk. Zdobądź klucze obiektów w tablicy za pomocą „Obiekt.Klucze()„Metoda, a następnie ustaw wszystkie atrybuty na określonych elementach za pomocą„setAttribute ()" metoda. W tym poście zilustrowaliśmy procedurę ustawienia wielu atrybutów na elemencie HTML za pomocą JavaScript.