Атрибут data-* тега <var>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <var>. Эти пользовательские атрибуты не влияют на отображение переменной, но могут использоваться JavaScript или CSS для различных целей.
<p>Уравнение:
<var data-var-type="independent" data-default-value="0">x</var> +
<var data-var-type="dependent">y</var> = 10</p>
Особенности работы:
- Имена атрибутов должны начинаться с
data- - Можно использовать несколько data-атрибутов
- Значения хранятся в виде строк
- Доступны через JavaScript и CSS
Типичные применения:
| Атрибут | Пример значения | Назначение |
|---|---|---|
data-var-type |
"independent", "dependent" | Тип переменной |
data-default-value |
"0", "1", "null" | Значение по умолчанию |
data-unit |
"m/s", "kg", "°C" | Единицы измерения |
data-format |
"float", "integer", "scientific" | Формат значения |
Пример доступа через JavaScript:
<var id="velocity" data-unit="m/s" data-min="0" data-max="100">v</var>
<script>
const varEl = document.getElementById('velocity');
console.log(varEl.dataset.unit); // "m/s"
console.log(varEl.dataset.min); // "0"
</script>
Пример использования в CSS:
<style>
var[data-var-type="independent"] {
color: #4CAF50;
font-weight: bold;
}
var[data-var-type="dependent"]::after {
content: " (" attr(data-unit) ")";
font-size: 0.8em;
color: #666;
}
</style>
<p>Скорость: <var data-var-type="dependent" data-unit="m/s">v</var></p>
Рекомендации:
- Используйте осмысленные имена атрибутов
- Храните только простые данные (для сложных структур используйте JSON)
- Избегайте хранения чувствительной информации
- Придерживайтесь единого стиля именования (kebab-case)
Ограничения:
- Не предназначены для видимого пользователю контента
- Значения всегда строковые (нужно преобразовывать числа/булевы значения)
- Не влияют на SEO напрямую
- Чрезмерное использование может усложнить код