Атрибут data-* тега <span>

Описание

Атрибуты data-* позволяют хранить дополнительную информацию в элементе <span>. Эти пользовательские атрибуты не влияют на отображение, но могут быть использованы в JavaScript и CSS.

Пример использования:

<span data-user-id="12345" data-role="admin"> Администратор </span>

Синтаксис и правила:

  • Имя атрибута должно начинаться с data-
  • Может содержать только буквы, цифры, дефисы (-), точки (.) и двоеточия (:)
  • Регистр символов имеет значение (case-sensitive)
  • Значение должно быть строкой (для сложных данных используйте JSON)

Пример доступа через JavaScript:

<span id="user-info" data-user='{"id":123,"name":"Иван"}'> Пользователь </span> <script> const userSpan = document.getElementById('user-info'); // Чтение простого data-атрибута const userId = userSpan.dataset.userId; // Чтение сложных данных (JSON) const userData = JSON.parse(userSpan.dataset.user); console.log(userData.name); // "Иван" // Запись данных userSpan.dataset.lastActive = new Date().toLocaleString(); </script>

Использование в CSS:

<style> span[data-role="admin"] { color: #d32f2f; font-weight: bold; } span[data-status="inactive"] { opacity: 0.6; } </style> <span data-role="admin" data-status="active">Администратор</span>

Практические примеры:

Сценарий Пример
Хранение ID data-product-id="42"
Флаги состояния data-loaded="true"
Локализация data-i18n="welcome.message"
Конфигурация data-config='{"delay":300}'

Лучшие практики:

  1. Используйте для невизуальных данных
  2. Придерживайтесь единого стиля именования
  3. Для сложных данных используйте JSON
  4. Избегайте хранения больших объемов данных
  5. Не используйте для информации, которая должна быть в DOM

Ограничения:

  • Значения всегда строковые (требуется преобразование)
  • Не поддерживает глубокие структуры данных без JSON
  • Доступ через dataset не работает в IE10 и ниже