Атрибут data-* тега <button>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в HTML-элементах. Для кнопок это особенно полезно для передачи метаданных JavaScript-обработчикам без использования дополнительных переменных.
<button
data-user-id="12345"
data-action="delete"
data-confirm="Вы уверены?"
onclick="handleButtonClick(this)"
>
Удалить пользователя
</button>
| Аспект | Описание | Особенности |
|---|---|---|
| Синтаксис | data-любое-название | Допустимы дефисы: data-user-role |
| Типы данных | Строки (автоматическое преобразование) | Числа, JSON, булевы значения |
| Доступ из JS | Через dataset или getAttribute | element.dataset.userId |
Практические примеры:
1. Хранение идентификатора:
<button data-product-id="789" class="add-to-cart">
Добавить в корзину
</button>
<script>
document.querySelector('.add-to-cart').addEventListener('click', function() {
const productId = this.dataset.productId;
console.log(`Добавлен товар ID: ${productId}`);
});
</script>
2. Передача сложных данных:
<button
data-user='{"id":101,"name":"Иван"}'
onclick="showUser(this.dataset.user)"
>
Показать пользователя
</button>
<script>
function showUser(userJson) {
const user = JSON.parse(userJson);
alert(`Пользователь: ${user.name}`);
}
</script>
Рекомендации:
- Используйте осмысленные имена атрибутов
- Для сложных данных используйте JSON.stringify()
- Не злоупотребляйте - только для данных, привязанных к элементу
- Доступ через dataset автоматически преобразует имена (data-user-id → userId)
Доступ к данным:
<button data-count="5" id="counter-btn">Кнопка</button>
<script>
const btn = document.getElementById('counter-btn');
// Получение данных
console.log(btn.dataset.count); // "5"
console.log(btn.getAttribute('data-count')); // "5"
// Установка данных
btn.dataset.count = 10;
console.log(btn.getAttribute('data-count')); // "10"
</script>
Примечание: Атрибуты data-* идеальны для хранения информации, связанной с конкретным элементом интерфейса, но не подходят для критически важных данных - используйте скрытые поля форм или состояние приложения.