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

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

Создание атрибута data-*

Для создания атрибута data-* просто добавьте атрибут с префиксом data- к вашему HTML-элементу. Например:

<div id="example" data-custom-info="Привет, мир!">Пример элемента с атрибутом data-*</div>

Здесь мы создали атрибут data-custom-info со значением «Привет, мир!» для элемента div.

Доступ к атрибутам data-* с помощью JavaScript

Для доступа к атрибутам data-* в JavaScript используйте dataset свойство элемента. Возвращаемый объект dataset содержит все атрибуты data-* в виде пар ключ-значение.

Пример использования:

const element = document.querySelector('#example');
const customInfo = element.dataset.customInfo;

console.log(customInfo); // Выводит: "Привет, мир!"

Изменение и удаление атрибутов data-*

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

element.dataset.customInfo = 'Новое значение';
console.log(element.dataset.customInfo); // Выводит: "Новое значение"

Для удаления атрибута data-* используйте оператор delete:

delete element.dataset.customInfo;
console.log(element.dataset.customInfo); // Выводит: "undefined"

Работа с атрибутами data-* в HTML и JavaScript позволяет хранить дополнительные данные для элементов страницы и упрощает манипуляцию этими данными.

Теперь вы знаете основы использования атрибутов data-* в HTML и JavaScript. Удачного кодирования! 😊