JS метод Element.setAttribute()

Загальний опис

Element.setAttribute() - це метод в JavaScript, який дозволяє встановлювати значення атрибутів HTML-елемента. Він приймає два аргументи: назву атрибута та його нове значення. Цей метод є особливо корисним для динамічного маніпулювання атрибутами елементів, що дозволяє змінювати їхню поведінку, зовнішній вигляд або функціональність без необхідності змінювати вихідний HTML-код.

Найпростіший спосіб використати setAttribute() - це викликати його для потрібного елемента та передати назву атрибута та його нове значення як аргументи:

const element = document.getElementById('myElement');
element.setAttribute('class', 'new-class');

У цьому прикладі ми встановлюємо значення атрибута class елемента з ідентифікатором myElement на new-class.

Метод setAttribute() може бути використаний для встановлення будь-якого атрибута HTML-елемента, включаючи стандартні атрибути, такі як id, class, src, href, disabled, value тощо, а також користувацькі атрибути, що розпочинаються з префікса data-.

Наприклад, ви можете динамічно змінювати посилання на зображення за допомогою атрибута src:

const image = document.getElementById('myImage');
image.setAttribute('src', 'new-image.jpg');

Або ви можете встановлювати значення користувацького атрибута data-* для зберігання додаткових даних про елемент:

const element = document.getElementById('myElement');
element.setAttribute('data-id', '123');

Метод setAttribute() також може бути корисним для динамічного додавання або видалення атрибутів елементів на основі певних умов. Наприклад, ви можете встановлювати атрибут disabled для кнопки, щоб зробити її неактивною:

const button = document.getElementById('myButton');
if (someCondition) {
  button.setAttribute('disabled', 'disabled');
} else {
  button.removeAttribute('disabled');
}

Крім того, setAttribute() часто використовується у поєднанні з іншими методами та властивостями JavaScript для реалізації складнішої функціональності. Наприклад, ви можете використовувати його для маніпулювання стилями елементів:

const element = document.getElementById('myElement');
element.setAttribute('style', 'color: red; font-weight: bold;');

Загалом, Element.setAttribute() є потужним інструментом для динамічного управління атрибутами HTML-елементів на веб-сторінках. Він дозволяє змінювати поведінку, зовнішній вигляд або функціональність елементів без необхідності змінювати вихідний HTML-код, що робить його незамінним для створення інтерактивних та адаптивних веб-додатків.

правити

Порада

Застосовуйте setAttribute() для маніпулювання стилями елементів, встановлюючи значення властивості style. Це дозволяє динамічно змінювати стилі елементів без необхідності додавати або видаляти класи CSS:

const element = document.getElementById('myElement');
element.setAttribute('style', 'color: red; font-weight: bold;'); // Змінює стилі елемента

автор: Bond правити

Порада

Застосовуйте setAttribute() для встановлення користувацьких атрибутів data-* на елементах. Це дозволяє зберігати додаткові дані про елемент, які можна використовувати пізніше в JavaScript. Наприклад:

const element = document.getElementById('myElement');
element.setAttribute('data-id', '123'); // Зберігає ідентифікатор елемента

автор: Bond правити

Порада

Використовуйте setAttribute() у поєднанні з умовними конструкціями для динамічного додавання або видалення атрибутів елементів залежно від певних умов. Наприклад, ви можете встановлювати атрибут disabled для кнопки, щоб зробити її неактивною:

const button = document.getElementById('myButton');
if (someCondition) {
  button.setAttribute('disabled', 'disabled'); // Робить кнопку неактивною
} else {
  button.removeAttribute('disabled'); // Робить кнопку активною
}

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

setAttribute(name, value)

Параметри

name

Рядок, що вказує назву атрибута.

автор: Bond

правити

value

Рядок, що містить значення для атрибута.

автор: Bond

правити

Повернення

none

Повертає undefined.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<img id="myImage" src="/img/logo.svg" width="100" alt="Демонстраційне зображення">

const image = document.getElementById('myImage');

// Встановлюємо нове значення для атрибута src
image.setAttribute('src', 'new-image.jpg');

// Встановлюємо нове значення для атрибута alt
image.setAttribute('alt', 'Нове зображення');

<a id="linkInput" href="#demo">Посилання для прикладу</a>
<input type="text" id="urlInput" value="текст для прикладу" placeholder="Введи щось">
<a id="myLink" href="#demo">Посилання для прикладу</a>

const linkInput = document.getElementById('linkInput');
const urlInput = document.getElementById('urlInput');
const link = document.getElementById('myLink');

const updateLink = () => {
  const linkText = linkInput.value;
  const url = urlInput.value;

  // Оновлюємо текст посилання
  link.textContent = linkText;

  // Оновлюємо атрибут href посилання
  link.setAttribute('href', url);
};

linkInput.addEventListener('input', updateLink);
urlInput.addEventListener('input', updateLink);