Ten post zilustruje procedurę ustawiania wielu atrybutów elementu HTML za pomocą JavaScript.
Jak ustawić wiele atrybutów elementu za pomocą JavaScript?
Aby jednocześnie ustawić wiele atrybutów elementu, najpierw utwórz obiekt z nazwami i wartościami atrybutów. Uzyskaj listę kluczy obiektu jako tablicę z „ Obiekt.keys() ”, a następnie ustaw wszystkie atrybuty określonego elementu HTML za pomocą metody „ ustawAtrybut() ' metoda.
Składnia
Podana składnia jest używana dla metody setAttribute():
element. ustaw atrybut ( attrNazwa, attrWartość ) ;
Powyższa składnia zawiera dwa parametry: „ Nazwa ' oraz ' wartość ”.
- “ attrNazwa ” to nazwa nowego atrybutu.
- “ attrValue ” to wartość nowego atrybutu.
- Ta metoda utworzy nowy atrybut i przypisze mu wartość. Jeśli określony atrybut już istnieje, jego wartość zostanie zaktualizowana.
Użyj podanej składni metody Object.keys():
Obiekt . Klucze ( obiekt )Zwraca tablicę danego obiektu.
Przykład 1: Ustawianie wielu atrybutów elementu za pomocą metody forEach() z metodą setAttribute()
Najpierw utwórz element w pliku HTML:
< identyfikator przycisku = 'przycisk' > LINUXHINT przycisk >Obecnie strona internetowa będzie wyglądać następująco:
W kodzie JavaScript najpierw utwórz obiekt o nazwie „ elementAtrybuty ” i dodaj atrybuty z nazwami i wartościami do obiektu. Tutaj dodamy atrybut style, nazwę elementu i właściwość disable elementu przycisku:
konst elementAtrybuty = {styl : „kolor tła: rgb(153, 28, 49); kolor biały;' ,
Nazwa : „LinuxButton” ,
wyłączone : '' ,
} ;
Teraz zdefiniuj funkcję o nazwie „ setMultipleAttributeonElement ” gdzie najpierw wywołaj „ Obiekt.keys() ” do uzyskania tablicy kluczy obiektu, a następnie użyć metody „ dla każdego() ”, aby przejrzeć tablicę i ostatecznie wywołać metodę „ ustawAtrybut() ”, aby ustawić wszystkie zdefiniowane atrybuty dla określonego elementu HTML.
funkcja setMultipleAttributesonElement ( element, elementAtrybuty ) {Obiekt . Klucze ( elementAtrybuty ) . dla każdego ( atrybut => {
element. ustaw atrybut ( atrybut, elementAtrybuty [ atrybut ] ) ;
} ) ;
}
Pobierz przycisk, używając przypisanego mu identyfikatora za pomocą „ getElementById() ' metoda:
konst przycisk = dokument. getElementById ( 'przycisk' ) ;Wywołaj zdefiniowaną funkcję „ setMultipleAttributeonElement ” i przekaż element jako pierwszy argument, a obiekt atrybutów jako drugi argument:
setMultipleAttributeonElement ( przycisk, elementAtrybuty ) ;Dane wyjściowe pokazują, że pomyślnie dodano wiele atrybutów przycisku:
Można również ustawić wiele atrybutów elementu bez tworzenia oddzielnego obiektu dla atrybutów. Aby to zrobić, postępuj zgodnie z poniższym przykładem.
Przykład 2: Ustaw wiele atrybutów elementu za pomocą pętli for z metodą setAttribute().
Zdefiniuj funkcję z dwoma parametrami w pliku JavaScript i użyj pętli for, aby ustawić w niej wiele atrybutów, wywołując „ ustawAtrybut() ' metoda:
funkcja setMultipleAttributesonElement ( element, elementAtrybuty ) {dla ( niech i w elemAttributes ) {
element. ustaw atrybut ( i, elemAtrybuty [ i ] ) ;
}
}
Pobierz przycisk, używając przypisanego mu identyfikatora:
konst przycisk = dokument. getElementById ( 'przycisk' ) ;Wywołaj zdefiniowaną funkcję, przekazując element przycisku i wiele atrybutów w postaci par nazwa-wartość:
setMultipleAttributeonElement ( przycisk, { 'styl' : 'kolor tła: rgb(153, 28, 49); kolor: biały;' , 'wyłączone' : '' , 'Nazwa' : „LinuxButton” } ) ;Wyjście
Zebraliśmy wszystkie niezbędne informacje związane z ustawianiem wielu atrybutów elementu HTML za pomocą JavaScript.
Wniosek
Predefiniowany JavaScript ustawAtrybut() ” służy do ustawiania jednego lub wielu atrybutów dla elementu. Aby ustawić wiele atrybutów elementu, najpierw utwórz obiekt zawierający atrybuty w postaci nazw-wartości. Uzyskaj klucze obiektów w tablicy za pomocą „ Obiekt.keys() ”, a następnie ustaw wszystkie atrybuty określonych elementów za pomocą metody „ ustawAtrybut() ' metoda. W tym poście zilustrowaliśmy procedurę ustawiania wielu atrybutów elementu HTML za pomocą JavaScript.