Атрибут data-* тега <main>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <main>. Эти пользовательские атрибуты могут быть использованы JavaScript для управления поведением или CSS для особой стилизации основного контента страницы.
<main data-theme="dark" data-page-id="homepage" data-loaded="false">
<h1>Главная страница</h1>
<!-- Основной контент -->
</main>
Особенности работы:
| Синтаксис | Пример | Доступ из JavaScript |
|---|---|---|
data-префикс |
data-user-id |
element.dataset.userId |
| Любые значения | data-visible="true" |
element.dataset.visible |
| JSON данные | data-config='{"mode":"advanced"}' |
JSON.parse(element.dataset.config) |
Использование в JavaScript:
<main id="main-content" data-theme="dark" data-options='{"collapsible":true}'>
<!-- Контент -->
</main>
<script>
const main = document.getElementById('main-content');
// Чтение простого атрибута
const theme = main.dataset.theme; // "dark"
// Чтение JSON данных
const options = JSON.parse(main.dataset.options);
if(options.collapsible) {
// Добавить функционал сворачивания
}
// Изменение значения
main.dataset.theme = 'light'; // Меняет на data-theme="light"
</script>
Использование в CSS:
<style>
main[data-theme="dark"] {
background-color: #333;
color: white;
}
main[data-loading="true"]::after {
content: "Загрузка...";
display: block;
color: gray;
}
</style>
<main data-theme="dark" data-loading="true">
<!-- Контент -->
</main>
Рекомендации по использованию:
- Используйте для хранения информации, связанной с элементом
- Придерживайтесь единого стиля именования (kebab-case)
- Не храните большие объемы данных - используйте JavaScript-объекты
- Для сложных структур данных применяйте JSON
- Избегайте дублирования информации, уже доступной через DOM
Динамическое управление данными:
<main id="content" data-visible="true">
<button onclick="toggleContent()">Переключить</button>
<!-- Контент -->
</main>
<script>
function toggleContent() {
const content = document.getElementById('content');
content.dataset.visible = content.dataset.visible === 'true' ? 'false' : 'true';
}
</script>
<style>
main[data-visible="false"] {
display: none;
}
</style>
Примечание: Атрибуты data-* предоставляют удобный способ хранения дополнительной информации в HTML-элементах. Для элементов <main> они особенно полезны для управления состоянием и конфигурацией основного содержимого страницы без необходимости использования глобальных переменных JavaScript.