Атрибут data-* тега <output>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <output>. Эти пользовательские атрибуты могут быть использованы JavaScript для управления поведением или хранения метаданных.
<output id="calc-result" data-unit="USD" data-precision="2">0.00</output>
<script>
const output = document.getElementById('calc-result');
console.log(output.dataset.unit); // "USD"
console.log(output.dataset.precision); // "2"
</script>
Основные правила именования:
| Правило | Пример |
|---|---|
Должен начинаться с data- |
data-currency |
| Может содержать дефисы | data-exchange-rate |
| Значение может быть любой строкой | data-format="decimal" |
Практическое применение:
<form oninput="updateResult()">
<input type="number" id="amount" value="100">
<output id="result" data-currency="EUR" data-rate="1.2">120</output>
</form>
<script>
function updateResult() {
const amount = document.getElementById('amount').value;
const output = document.getElementById('result');
const rate = parseFloat(output.dataset.rate);
output.value = (amount * rate).toFixed(2) + ' ' + output.dataset.currency;
}
</script>
Рекомендации по использованию:
- Используйте для хранения конфигурации или метаданных
- Избегайте хранения сложных структур (используйте JSON для сериализации)
- Придерживайтесь единого стиля именования (kebab-case)
- Не храните важные данные только в data-атрибутах
Пример с JSON данными:
<output id="user-info" data-user='{"id":123,"name":"John"}'></output>
<script>
const output = document.getElementById('user-info');
const user = JSON.parse(output.dataset.user);
output.value = user.name; // "John"
</script>
Особенности работы:
- Доступны через свойство
datasetв JavaScript - Не влияют на отображение по умолчанию
- Не участвуют в отправке формы
- Поддерживаются всеми современными браузерами
Примечание: Атрибуты data-* особенно полезны для хранения дополнительной информации, связанной с выводом данных, но для сложной логики предпочтительнее использовать JavaScript-объекты или state-менеджмент в современных фреймворках.