В этом посте будет показана процедура установки нескольких атрибутов HTML-элемента с помощью JavaScript.
Как установить несколько атрибутов для элемента с помощью JavaScript?
Чтобы одновременно установить несколько атрибутов для элемента, сначала создайте объект с именами и значениями атрибутов. Получить список ключей объекта в виде массива с параметром « Объект.keys() », затем установите все атрибуты указанного HTML-элемента с помощью « установить атрибут () метод.
Синтаксис
Данный синтаксис используется для метода setAttribute():
элемент. setAttribute ( имя атрибута, значение атрибута ) ;
Приведенный выше синтаксис содержит два параметра: « имя ' а также ' ценность ».
- “ имя_атрибута ” — это имя нового атрибута.
- “ значение атрибута ” — это значение нового атрибута.
- Этот метод создаст новый атрибут и присвоит ему значение. Если указанный атрибут уже существует, то его значение будет обновлено.
Используйте данный синтаксис для метода Object.keys():
Объект . ключи ( объект )Он возвращает массив заданного объекта.
Пример 1. Установка нескольких атрибутов элемента с использованием метода forEach() и метода setAttribute()
Сначала создайте элемент в файле HTML:
< идентификатор кнопки знак равно 'кнопка' > ЛИНУКС ПОДСКАЗКА кнопка >В настоящее время веб-страница будет выглядеть так:
В коде JavaScript сначала создайте объект с именем « элементАтрибуты ” и добавьте к объекту атрибуты с именами и значениями. Здесь мы добавим атрибут стиля, имя элемента и свойство отключения для элемента кнопки:
константа элементАтрибуты знак равно {стиль : 'фоновый цвет: rgb (153, 28, 49); белый цвет;' ,
имя : 'Кнопка Linux' ,
инвалид : '' ,
} ;
Теперь определите функцию с именем « setMultipleAttributesonElement », где сначала вызовите « Объект.keys() ' для получения массива ключей объекта, а затем использовать ' для каждого() », чтобы перебрать массив и, наконец, вызвать « установить атрибут () », чтобы установить все определенные атрибуты для указанного элемента HTML.
функция setMultipleAttributesonElement ( элемент, атрибуты элемента ) {Объект . ключи ( элементАтрибуты ) . для каждого ( атрибут => {
элемент. setAttribute ( атрибут, elemAttributes [ атрибут ] ) ;
} ) ;
}
Получить кнопку, используя назначенный ей идентификатор с помощью « получитьэлемент по идентификатору() метод:
константа кнопка знак равно документ. получитьэлементбиид ( 'кнопка' ) ;Вызов определенной функции « setMultipleAttributesonElement ” и передать элемент в качестве первого аргумента и объект атрибутов в качестве второго аргумента:
setMultipleAttributesonElement ( кнопка, атрибуты элемента ) ;Вывод показывает, что несколько атрибутов кнопки успешно добавлены:
Вы также можете установить несколько атрибутов для элемента без создания отдельного объекта для атрибутов. Для этого следуйте приведенному ниже примеру.
Пример 2. Установка нескольких атрибутов элемента с использованием цикла for с методом setAttribute()
Определите функцию с двумя параметрами в файле JavaScript и используйте цикл for для установки нескольких атрибутов внутри нее, вызвав « установить атрибут () метод:
функция setMultipleAttributesonElement ( элемент, атрибуты элемента ) {за ( пусть я в elemAttributes ) {
элемент. setAttribute ( я, elemАтрибуты [ я ] ) ;
}
}
Получите кнопку, используя назначенный ей идентификатор:
константа кнопка знак равно документ. получитьэлементбиид ( 'кнопка' ) ;Вызовите определенную функцию, передав элемент кнопки и несколько атрибутов в виде пар 'имя-значение':
setMultipleAttributesonElement ( кнопка, { 'стиль' : 'цвет фона: rgb(153, 28, 49); цвет: белый;' , 'инвалид' : '' , 'имя' : 'Кнопка Линукс' } ) ;Выход
Мы собрали всю необходимую информацию, связанную с установкой нескольких атрибутов HTML-элемента с помощью JavaScript.
Вывод
Предопределенный JavaScript установить атрибут () ” используется для установки одного или нескольких атрибутов элемента. Чтобы установить несколько атрибутов для элемента, сначала создайте объект, содержащий атрибуты в виде имен-значений. Получить ключи объектов в массиве с помощью « Объект.keys() », затем установите все атрибуты указанных элементов с помощью « установить атрибут () метод. В этом посте мы проиллюстрировали процедуру установки нескольких атрибутов для элемента HTML с помощью JavaScript.