Недавно я узнал о атрибутах данных 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 и более ранних версий