The setAttribute() метод використовується для встановлення або додавання атрибута до певного елемента та надання йому значення. Якщо атрибут уже існує, він лише встановлює або змінює значення атрибута. Отже, ми також можемо використовувати setAttribute() метод для оновлення існуючого значення атрибута. Якщо відповідний атрибут не існує, буде створено новий атрибут із зазначеним іменем і значенням. Цей метод не повертає жодного значення. Ім’я атрибута автоматично перетворюється на нижній регістр, коли ми використовуємо його в елементі HTML.
Хоча ми можемо додати стиль атрибут за допомогою setAttribute() метод, але рекомендується не використовувати цей метод для укладання. Для додавання стилів ми можемо використовувати властивості об’єкта style, які ефективно змінять стиль. Це можна зрозуміти за допомогою наступного коду.
Неправильний спосіб
Рекомендується не використовувати його для зміни стилю.
element.setAttribute('style', 'background-color: blue;');
Правильний шлях
sharwanand
Правильний спосіб зміни стилю наведено нижче.
альтернативи watchcartoononline.io
element.setAttribute.backgroundColor = 'blue';
Щоб отримати значення атрибута, ми можемо використовувати getAttribute() і щоб видалити певний атрибут з елемента, ми можемо використати removeAtrribute() метод.
Якщо ми додаємо логічний атрибут, наприклад вимкнено , тоді незалежно від значення воно завжди вважається правда . Якщо нам потрібно встановити значення атрибута Boolean на помилковий , ми повинні видалити весь атрибут за допомогою removeAttribute() метод .
Синтаксис
element.setAttribute(attributeName, attributeValue)
Аргументи цього методу не є необов'язковими. Під час використання цього методу необхідно включити обидва параметри. Значення параметрів цього методу визначаються наступним чином.
Значення параметрів
attributeName: Це ім’я атрибута, який ми хочемо додати до елемента. Його не можна залишати порожнім; тобто це не є необов’язковим.
attributeValue: Це значення атрибута, яке ми додаємо до елемента. Це також не необов’язкове значення.
Розберемося, як користуватися setAttribute() за допомогою деяких ілюстрацій.
Приклад1
У цьому прикладі ми додаємо a href атрибут зі значенням 'https://www.javatpoint.com/' до тег з id = 'link' .
JavaScript setAttribute() method function fun() { document.getElementById('link').setAttribute('href', 'https://www.javatpoint.com/'); } <h2> It is an example of adding an attribute using the setAttribute() method. </h2> <a id="link"> javaTpoint.com </a> <p> Click the follwing button to see the effect. </p> Add attribute Перевірте зараз Вихід
конкатенація рядків
Після виконання наведеного вище коду результатом буде -
Ми бачимо, що до натискання цієї кнопки посилання не створюється. Після натискання кнопки виведення буде -
Тепер ми бачимо, що посилання створено.
Приклад 2
У цьому прикладі ми оновлюємо значення існуючого атрибута за допомогою setAttribute() метод. Тут ми перетворюємо текстове поле на кнопку, змінюючи значення типу атрибут від текст до кнопку .
jdbc
Ми повинні натиснути вказану кнопку, щоб побачити ефект.
JavaScript setAttribute() method function fun() { document.getElementById('change').setAttribute('type', 'button'); } <h2> It is an example to update an attribute's value using the setAttribute() method. </h2> <p> Click the follwing button to see the effect. </p> Change Перевірте зараз Вихід
Після виконання наведеного вище коду результатом буде -
Після натискання кнопки виведення буде -
Приклад3
Тут ми додаємо логічний атрибут вимкнено щоб вимкнути вказану кнопку. Якщо ми встановимо значення вимкнено до порожнього рядка, тоді йому автоматично встановлюється значення true, що призводить до вимкнення кнопки.
JavaScript setAttribute() method function fun() { document.getElementById('btn').setAttribute('disabled', ''); } <h2> Example of the setAttribute() method. </h2> <p> Click the following button to see the effect </p> Click me Перевірте зараз Вихід
значення рядка
Після виконання наведеного вище коду результатом буде -
Після натискання кнопки виведення буде -
