Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70% Забронировать скидку
02 Июн 2023
2 мин
1459

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

Узнайте, как легко работать с атрибутами 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. Они могут быть полезными для хранения дополнительных данных и взаимодействия с ними в ваших скриптах. Удачи в веб-разработке! 😉

Добавить комментарий

Подарок
Забрать подарок