setAttribute() в JavaScript — задати атрибут елемента

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

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	5

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

Переглядач
	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);

<header>
  <h2 class="title">Element: setAttribute() method</h2>
  <p class="description">Встановлює значення атрибута для елемента.</p>
</header>
<main>
  <div class="result">
    <img id="myImage" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зображення за замовчуванням">
    <div>
      <label for="imageUrl">URL зображення:</label>
      <input type="text" id="imageUrl" value="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E">
    </div>
    <div>
      <label for="imageAlt">Альтернативний текст:</label>
      <input type="text" id="imageAlt" value="Зображення за замовчуванням">
    </div>
    <button id="updateImageBtn">Оновити зображення</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

img {
  max-width: 100%;
  height: auto;
}

const imageElement = document.getElementById('myImage');
const imageUrlInput = document.getElementById('imageUrl');
const imageAltInput = document.getElementById('imageAlt');
const updateImageBtn = document.getElementById('updateImageBtn');

updateImageBtn.addEventListener('click', () => {
  const newSrc = imageUrlInput.value;
  const newAlt = imageAltInput.value;

  imageElement.setAttribute('src', newSrc);
  imageElement.setAttribute('alt', newAlt);
});
//# sourceURL=pen.js