Пользовательские атрибуты данных data-*
Храните пользовательские данные непосредственно в элементах с помощью атрибутов data-*
«Пользовательские атрибуты данных data-*» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Что такое атрибуты data-*?
Пользовательские атрибуты data-* позволяют хранить дополнительную информацию непосредственно в HTML-элементах:
<button data-user-id="42" data-action="delete">Delete User</button>
<li data-category="frontend" data-level="beginner">HTML</li>
<!-- Format: data-[name]="value" -->
<!-- Any alphanumeric name after data- is valid -->
<!-- Values are always strings -->Зачем нужны data-*
До появления data-* разработчики хранили дополнительные данные в:
- Скрытых полях ввода (неудобно)
- Именах классов CSS (ненадёжно)
- Нестандартных атрибутах, таких как
relилиtitle(недопустимо в HTML)
HTML5 закрепил data-* как официальный способ встраивать пользовательские данные, не влияя на семантику или отображение.
Правила именования
Правила именования атрибутов data-*:
- Имя должно начинаться с
data- - Имя может содержать строчные буквы, цифры, дефисы, символы подчёркивания и точки
- В имени нельзя использовать прописные буквы (спецификация HTML преобразует их в строчные)
- Имя не может начинаться с
xml
<div data-user-id="1">OK</div>
<div data-product-category="tools">OK</div>
<!-- <div data-XML-thing="1">BAD: starts with xml -->
<!-- <div data-MyProp="1">BAD: uppercase in name -->Чтение data-* в JavaScript
Получайте пользовательские данные через свойство dataset:
<button id="btn"
data-user-id="42"
data-action="delete"
data-confirm-message="Are you sure?"
>
Delete
</button>
<script>
const btn = document.getElementById('btn');
console.log(btn.dataset.userId); // '42'
console.log(btn.dataset.action); // 'delete'
console.log(btn.dataset.confirmMessage); // 'Are you sure?'
// Note: data-user-id → dataset.userId (camelCase conversion)
</script>Запись data-* с помощью dataset
Устанавливайте и удаляйте атрибуты data-* через dataset:
const card = document.querySelector('.card');
// Set:
card.dataset.status = 'active';
// Now: <div class="card" data-status="active">
// Delete:
delete card.dataset.status;
// Now: data-status is removed
// Alternatively with setAttribute:
card.setAttribute('data-status', 'inactive');
card.removeAttribute('data-status');Преобразование дефисов в camelCase
API dataset преобразует имена, разделённые дефисами, в camelCase:
<!-- HTML attribute JavaScript dataset property -->
data-user-id → dataset.userId
data-product-category → dataset.productCategory
data-max-retries → dataset.maxRetries
data-is-active → dataset.isActiveСелекторы атрибутов CSS
Используйте атрибуты data-* в селекторах CSS:
[data-status="active"] {
color: green;
}
[data-status="inactive"] {
color: gray;
text-decoration: line-through;
}
/* Present but any value: */
[data-featured] {
border: 2px solid gold;
}Шаблон всплывающей подсказки
Создавайте всплывающие подсказки только на CSS с помощью атрибутов data-*:
<span data-tooltip="This is a tooltip">Hover me</span>
/* CSS: */
/*
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip); /* attr() reads the attribute value */
position: absolute;
background: #333;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
[data-tooltip]:hover::after { opacity: 1; }
*/Шаблон отслеживания состояния
Отслеживайте состояние компонента с помощью атрибутов data-*:
<button data-state="off" id="toggle">Toggle</button>
<script>
document.getElementById('toggle').addEventListener('click', function() {
const state = this.dataset.state;
this.dataset.state = state === 'off' ? 'on' : 'off';
this.textContent = this.dataset.state === 'on' ? 'Active' : 'Toggle';
});
</script>
/* CSS: */
/* [data-state="on"] { background: green; color: white; } */data-* и переменные JavaScript
Когда использовать data-*, а когда хранить данные в JavaScript:
- Используйте data-* для значений, которые непосредственно соответствуют элементу DOM и могут читаться CSS
- Используйте переменные и объекты JavaScript для сложных структур данных, не связанных с конкретными элементами
- Не храните большие объёмы или конфиденциальные данные в data-* — они видны в DevTools
data-* предназначены не для отображения
Распространённые ошибки, которых следует избегать:
<!-- BAD: storing presentation data in data-* -->
<div data-color="red" data-font-size="18">Text</div>
<!-- Use CSS classes instead: -->
<div class="text-danger text-lg">Text</div>
<!-- BAD: storing sensitive data -->
<div data-api-key="sk-123...">Content</div>
<!-- NEVER store secrets in HTML attributes -->Быстрая проверка
Как API dataset обращается к атрибуту data-product-id?
Итог: атрибуты data-*
Основные сведения о пользовательских атрибутах data-*:
data-name="value"— хранит пользовательские метаданные в элементах- Доступ через
element.dataset.camelCase - В API dataset дефисы преобразуются в camelCase
- Используйте их в CSS с селекторами
[data-name="value"] - Никогда не храните конфиденциальные данные (ключи, пароли) в атрибутах data-*
Часто задаваемые вопросы
Урок «Пользовательские атрибуты данных data-*» бесплатный?
Да — полный текст урока «Пользовательские атрибуты данных data-*» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Пользовательские атрибуты данных data-*»?
Храните пользовательские данные непосредственно в элементах с помощью атрибутов data-* Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Пользовательские атрибуты данных data-*»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- id, class, style и title
- Атрибут hidden
- tabindex и accesskey
- Пользовательские атрибуты данных data-*