Атрибут data-* тега <div>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <div> для использования в JavaScript и CSS. Это создает стандартизированный способ хранения пользовательских данных прямо в HTML.
<div id="userCard"
data-user-id="12345"
data-role="admin"
data-registration-date="2023-01-15">
Информация о пользователе
</div>
Основные возможности:
| Применение | Пример | Преимущества |
|---|---|---|
| Хранение данных | data-product-id="42" |
Доступ без дополнительных запросов |
| Конфигурация | data-config='{"mode":"dark"}' |
Настройка поведения элементов |
| Состояние | data-loaded="false" |
Отслеживание состояния элемента |
Доступ через JavaScript:
<div id="product" data-price="19.99" data-category="electronics">
Умные часы
</div>
<script>
const product = document.getElementById('product');
// Чтение данных
console.log(product.dataset.price); // "19.99"
console.log(product.dataset.category); // "electronics"
// Запись данных
product.dataset.discount = "10%";
product.dataset.category = "wearables";
</script>
Использование в CSS:
<style>
/* Стилизация по данным */
[data-role="admin"] {
border-left: 3px solid #dc3545;
}
[data-status="active"] {
background-color: #e8f5e9;
}
/* Использование с CSS-переменными */
[data-theme="dark"] {
--bg-color: #333;
--text-color: #fff;
}
</style>
<div data-role="admin" data-status="active">
Администратор системы
</div>
Сложные данные (JSON):
<div id="userWidget" data-user-info='{"name":"John","age":30,"roles":["admin","editor"]}'>
Виджет пользователя
</div>
<script>
const userData = JSON.parse(
document.getElementById('userWidget').dataset.userInfo
);
console.log(userData.name); // "John"
console.log(userData.roles); // ["admin", "editor"]
</script>
Рекомендации по именованию:
| Правило | Хороший пример | Плохой пример |
|---|---|---|
| Формат | data-user-status |
dataUserStatus |
| Осмысленность | data-created-date |
data-cd |
| Значения | data-visible="true" |
data-visible="1" |
Лучшие практики:
- Используйте для невизуальных данных, не влияющих на отображение
- Избегайте хранения больших объемов данных
- Для сложных структур используйте JSON в одном атрибуте
- Не дублируйте информацию, доступную через другие атрибуты
- Сохраняйте согласованность именования в проекте