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(name, value)

Параметри

*name

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

*value

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

Return

none

Повертає undefined.

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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);

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

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

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