Атрибут data-* тега <dd>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементах <dd>. Эти пользовательские атрибуты не влияют на отображение, но могут использоваться JavaScript для динамического управления контентом или CSS для условного стилизования.
<dl>
<dt>HTML</dt>
<dd data-tech="markup" data-version="5" data-complexity="low">
Язык гипертекстовой разметки
</dd>
<dt>JavaScript</dt>
<dd data-tech="programming" data-version="ES2022" data-complexity="high">
Язык программирования для веб-страниц
</dd>
</dl>
Синтаксис и правила:
| Правило | Пример | Примечание |
|---|---|---|
Должен начинаться с data- |
data-category |
Без дефиса не будет работать |
| Может содержать дефисы | data-user-id |
Преобразуется в camelCase в JS |
| Любые значения | data-value="42" |
Всегда возвращается как строка |
Доступ через JavaScript:
<dl>
<dt>CSS</dt>
<dd id="css-def" data-tech="styling" data-version="3">
Каскадные таблицы стилей
</dd>
</dl>
<script>
const ddElement = document.getElementById('css-def');
// Доступ через dataset
console.log(ddElement.dataset.tech); // "styling"
console.log(ddElement.dataset.version); // "3"
// Установка нового значения
ddElement.dataset.version = 4;
// Добавление нового атрибута
ddElement.dataset.newAttribute = 'value';
</script>
Использование в CSS:
<style>
/* Стиль для элементов с определенным data-атрибутом */
dd[data-complexity="high"] {
color: #d32f2f;
font-weight: bold;
}
/* Стиль при наличии атрибута */
dd[data-version] {
border-left: 3px solid #4CAF50;
padding-left: 10px;
}
/* По частичному совпадению */
dd[data-tech^="prog"] {
background-color: #f5f5f5;
}
</style>
<dl>
<dt>React</dt>
<dd data-tech="programming" data-complexity="medium">
JavaScript-библиотека для создания интерфейсов
</dd>
</dl>
Практические примеры применения:
1. Фильтрация определений
<button onclick="filterDefinitions('programming')">Показать только программирование</button>
<dl id="tech-list">
<dt>HTML</dt>
<dd data-category="markup">...</dd>
<dt>JavaScript</dt>
<dd data-category="programming">...</dd>
</dl>
<script>
function filterDefinitions(category) {
document.querySelectorAll('#tech-list dd').forEach(dd => {
dd.style.display = dd.dataset.category === category ? '' : 'none';
});
}
</script>
2. Динамическое обновление контента
<dl>
<dt>Версия API</dt>
<dd data-api-version data-endpoint="/api/version">Загрузка...</dd>
</dl>
<script>
document.querySelectorAll('[data-endpoint]').forEach(el => {
fetch(el.dataset.endpoint)
.then(response => response.json())
.then(data => {
el.textContent = data.version;
el.dataset.loaded = true;
});
});
</script>
Рекомендации по использованию:
- Используйте для хранения информации, связанной с элементом, но не отображаемой напрямую
- Избегайте хранения больших объемов данных - лучше использовать ID и внешние структуры
- Придерживайте единого формата именования (kebab-case)
- Для сложных данных используйте JSON в одном атрибуте:
data-info='{"id":1,"name":"test"}' - Не используйте для критически важной информации - данные можно изменить в DevTools
Совместимость и производительность:
- Поддерживается всеми современными браузерами
- Доступ через
datasetработает быстрее, чемgetAttribute() - Не вызывает перерисовку DOM при изменении
- Может использоваться в сочетании с другими технологиями (React, Vue и т.д.)
Примечание: Атрибуты data-* предоставляют удобный способ связывания данных с элементами HTML без использования дополнительных JavaScript-структур. Особенно полезны для интерактивных списков определений, где каждое описание может иметь свои метаданные.