Атрибут data-* тега <li>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементах <li>. Эти пользовательские атрибуты могут быть использованы JavaScript для управления поведением или CSS для особой стилизации.
<ul>
<li data-id="42" data-category="electronics" data-price="199.99">
Смартфон Premium X
</li>
<li data-id="57" data-category="books" data-price="24.50">
Книга "Веб-разработка"
</li>
</ul>
Особенности работы:
| Синтаксис | Описание | Пример |
|---|---|---|
data-префикс |
Любое имя после "data-" | data-user-id |
| Значение | Строка, число или JSON | data-visible="true" |
| Доступ из JS | Через dataset |
element.dataset.id |
Доступ к данным через JavaScript:
<ul id="products">
<li data-id="101" data-in-stock="true">Ноутбук</li>
<li data-id="102" data-in-stock="false">Планшет</li>
</ul>
<script>
const products = document.querySelectorAll('#products li');
products.forEach(item => {
if (item.dataset.inStock === 'false') {
item.style.opacity = '0.6';
item.innerHTML += ' (нет в наличии)';
}
console.log(`ID: ${item.dataset.id}, Наличие: ${item.dataset.inStock}`);
});
</script>
Использование в CSS:
<style>
li[data-priority="high"] {
color: #d32f2f;
font-weight: bold;
}
li[data-priority="low"]::after {
content: " (низкий приоритет)";
font-size: 0.8em;
color: #757575;
}
</style>
<ul>
<li data-priority="high">Срочная задача</li>
<li data-priority="medium">Обычная задача</li>
<li data-priority="low">Задача на будущее</li>
</ul>
Рекомендации по использованию:
- Используйте для хранения информации, связанной с элементом
- Придерживайтесь единого стиля именования (kebab-case)
- Не храните большие объемы данных - для этого лучше подойдут JavaScript-объекты
- Для сложных структур используйте JSON в data-атрибутах
Пример с JSON данными:
<ul>
<li data-user='{"id":42,"name":"Иван","roles":["admin","editor"]}'>
Пользовательский элемент
</li>
</ul>
<script>
const userElement = document.querySelector('li');
const userData = JSON.parse(userElement.dataset.user);
console.log(userData.name); // "Иван"
console.log(userData.roles.includes('admin')); // true
</script>
SEO и доступность:
- Data-атрибуты не влияют на SEO
- Не заменяют семантические атрибуты (как
aria-*) - Могут использоваться для тестирования (как селекторы)
- Хорошо работают с современными фреймворками
Примечание: Атрибуты data-* - мощный инструмент для связывания данных с DOM-элементами. Они особенно полезны в SPA-приложениях, где нужно хранить состояние элементов.