Недавно я узнал о атрибутах данных HTML5.

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

Другими словами, атрибуты данных позволяют нам хранить данные в вашей разметке, к которым вы можете легко получить доступ в своих CSS и JS, чтобы расширить возможности стиля и поведения вашей страницы.

пример:

// HTML
<p class="item" data-price="3">Apple: $3</p>
<p class="item" data-price="4">Orange: $4</p>
<p class="item" data-price="10">Pineapple: $10</p>
<p class="total"></p>
// JS
const foods = document.querySelectorAll('.item');
const totalElement = document.querySelector('.total');
let total = 0;
foods.forEach(item => {
  total = total + parseInt(item.dataset.price);
})
totalElement.textContent = `Total: $${total}`;

В этом последнем теге абзаца будет окончательная цена всех элементов, перечисленных выше. Это довольно бесполезный вариант использования, который придумал мой сонный мозг, но есть гораздо больше вариантов использования, в которых вы могли бы извлечь выгоду из возможности простого создания произвольных наборов данных и доступа к ним в других частях вашего кода. .

Эта страница представляет собой хорошее погружение в тему, которое включает в себя несколько важных вещей, которые следует учитывать при использовании наборов данных (обратите внимание, что мне нужно было преобразовать строку в целое число), как использовать эту функцию в вашем CSS, а также многое другое. информацию о синтаксисе и о том, как вы могли реализовать что-то подобное в прошлом.

отказ от ответственности: API списка данных поддерживается всеми современными браузерами, кроме IE10 и более ранних версий