Как работать с атрибутами data- в HTML и JavaScript

Атрибуты data-* позволяют хранить дополнительные данные на элементах HTML, без необходимости использовать другие атрибуты или элементы для этого. Они могут быть полезны для хранения информации, которая не должна отображаться на странице, но требуется для работы скриптов. В этой статье мы рассмотрим, как работать с атрибутами data-* в HTML и JavaScript.

Создание и использование атрибутов data- в HTML

Создать атрибут data-* очень просто. Достаточно добавить атрибут к элементу HTML, начинающийся с data- и дополнив его названием, которое вы хотите использовать. Например:

<div data-product-id="123" data-product-name="товар">
  <!-- содержимое элемента -->
</div>

В этом примере мы создали два атрибута data-: data-product-id и data-product-name. Значения этих атрибутов могут быть использованы в JavaScript для работы с данными.

Работа с атрибутами data- в JavaScript

Для работы с атрибутами data-* в JavaScript используется свойство dataset. С его помощью вы можете получать и устанавливать значения атрибутов. Рассмотрим пример:

// получение элемента
const element = document.querySelector('[data-product-id]');

// чтение значения атрибута data-product-id
const productId = element.dataset.productId;

// изменение значения атрибута data-product-name
element.dataset.productName = 'новое имя товара';

В этом примере мы получаем элемент с атрибутом data-product-id, затем считываем его значение и изменяем значение другого атрибута data-product-name.

Курсы по программированию

Помогаем получить новую профессию с гарантией трудоустройства!

Подробнее

Удаление атрибутов data-

Чтобы удалить атрибут data-*, вы можете использовать метод removeAttribute():

element.removeAttribute('data-product-name');

Теперь вы знаете, как работать с атрибутами data-* в HTML и JavaScript. Они могут быть полезными для хранения дополнительных данных и взаимодействия с ними в ваших скриптах. Удачи в веб-разработке! 😉

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее