Тази публикация ще илюстрира процедурата за задаване на множество атрибути на HTML елемент с помощта на JavaScript.
Как да зададете множество атрибути на елемент с помощта на JavaScript?
За да зададете няколко атрибута на елемент едновременно, първо създайте обект с имената и стойностите на атрибутите. Вземете списък с ключовете на обекта като масив с „ Object.keys() ”, след това задайте всички атрибути на посочения HTML елемент с „ setAttribute() ” метод.
Синтаксис
Даденият синтаксис се използва за метода setAttribute():
елемент. setAttribute ( attrName, attrValue ) ;
Горният синтаксис съдържа два параметъра: “ име ' и ' стойност ”.
- “ attrName ” е името на новия атрибут.
- “ attrValue ” е стойността на новия атрибут.
- Този метод ще създаде нов атрибут и ще му присвои стойност. Ако посоченият атрибут вече съществува, стойността му ще бъде актуализирана.
Използвайте дадения синтаксис за метода Object.keys():
Обект . ключове ( обект )Връща масив от даден обект.
Пример 1: Задаване на множество атрибути на елемент с помощта на метода forEach() с метода setAttribute()
Първо създайте елемент в HTML файла:
< идентификатор на бутона = 'бутон' > LINUXHINT бутон >В момента уеб страницата ще изглежда така:
В кода на JavaScript първо създайте обект с име „ elementAttributes ” и добавете атрибутите с имена и стойности към обекта. Тук ще добавим атрибута style, името на елемента и свойството disable за елемента бутон:
конст elementAttributes = {стил : 'цвят на фона: rgb(153, 28, 49); цвят: бял;' ,
име : „LinuxButton“ ,
хора с увреждания : '' ,
} ;
Сега дефинирайте функция с име ' setMultipleAttributesonElement ”, където първо се обадете на „ Object.keys() ' за получаване на масива от ключове на обекта и след това използвайте ' за всеки() ” за итериране през масива и накрая извикване на „ setAttribute() ”, за да зададете всички дефинирани атрибути на посочения HTML елемент.
функция setMultipleAttributesonElement ( елемент, elementAttributes ) {Обект . ключове ( elementAttributes ) . за всеки ( атрибут => {
елемент. setAttribute ( атрибут, elemAttributes [ атрибут ] ) ;
} ) ;
}
Извлечете бутона, като използвате присвоения му идентификатор с помощта на „ getElementById() ” метод:
конст бутон = документ. getElementById ( 'бутон' ) ;Извикване на дефинираната функция “ setMultipleAttributesonElement ” и предайте елемента като първи аргумент и обекта от атрибути като втори аргумент:
setMultipleAttributesonElement ( бутон, elementAttributes ) ;Резултатът показва, че множеството атрибути на бутон са добавени успешно:
Можете също да зададете множество атрибути на елемент, без да създавате отделен обект за атрибутите. За да направите това, следвайте примера по-долу.
Пример 2: Задаване на множество атрибути на елемент с помощта на for цикъл с метод setAttribute()
Дефинирайте функция с два параметъра в JavaScript файл и използвайте for цикъл, за да зададете множество атрибути вътре в него, като извикате „ setAttribute() ” метод:
функция setMultipleAttributesonElement ( елемент, elementAttributes ) {за ( нека в elemAttributes ) {
елемент. setAttribute ( i, elemAttributes [ аз ] ) ;
}
}
Извлечете бутона, като използвате присвоения му идентификатор:
конст бутон = документ. getElementById ( 'бутон' ) ;Извикайте дефинираната функция чрез предаване на елемента бутон и множество атрибути под формата на двойки име-стойност:
setMultipleAttributesonElement ( бутон, { 'стил' : 'цвят на фона: rgb(153, 28, 49); цвят: бял;' , 'хора с увреждания' : '' , 'име' : 'LinuxButton' } ) ;Изход
Събрахме цялата съществена информация, свързана със задаване на множество атрибути на HTML елемент с помощта на JavaScript.
Заключение
Предварително дефинираният JavaScript setAttribute() ” се използва за задаване на единични или множество атрибути за елемент. За да зададете множество атрибути на елемент, първо създайте обект, който съдържа атрибути под формата на имена-стойности. Вземете ключовете на обекти в масив, като използвате „ Object.keys() ', след което задайте всички атрибути на посочените елементи с ' setAttribute() ” метод. В тази публикация илюстрирахме процедурата за задаване на множество атрибути на HTML елемент с помощта на JavaScript.