Атрибут class тега <body>
Описание
Атрибут class позволяет задать один или несколько классов для элемента <body>, которые могут использоваться для:
- Стилизации через CSS
- Обращения к элементу через JavaScript
- Условного применения логики в различных фреймворках
<body class="dark-theme logged-in page-home">
<!-- Содержимое страницы -->
</body>
Основные возможности:
| Применение | Пример |
|---|---|
| CSS-стилизация | .dark-theme { background: #222; } |
| JavaScript-селекция | document.body.classList |
| Состояние приложения | .modal-open, .loading |
| Адаптивный дизайн | .mobile-view, .desktop-view |
Рекомендации по именованию классов:
- Используйте осмысленные, описательные имена
- Придерживайтесь единого стиля (BEM, kebab-case)
- Избегайте избыточности (
body-body) - Не используйте классы только для JS (добавляйте префикс
js-) - Минимизируйте количество классов
Работа с классами через JavaScript:
// Добавление класса
document.body.classList.add('new-class');
// Удаление класса
document.body.classList.remove('old-class');
// Переключение класса
document.body.classList.toggle('active');
// Проверка наличия класса
if (document.body.classList.contains('dark-theme')) {
// Логика для темной темы
}
Практические примеры использования:
1. Темы оформления
<body class="theme-light">
<button onclick="toggleTheme()">Сменить тему</button>
<style>
.theme-light { background: #fff; color: #333; }
.theme-dark { background: #222; color: #eee; }
</style>
<script>
function toggleTheme() {
document.body.classList.toggle('theme-light');
document.body.classList.toggle('theme-dark');
}
</script>
</body>
2. Состояние приложения
<body class="user-logged-in">
<script>
// При загрузке проверяем статус
if (isLoggedIn()) {
document.body.classList.add('user-logged-in');
} else {
document.body.classList.add('user-guest');
}
</script>
</body>
Особенности работы с <body>:
- Классы body влияют на весь документ
- Изменение классов может вызвать repaint всего документа
- Идеально для глобальных состояний (тема, авторизация)
- Не рекомендуется для частых изменений (анимации)
- Фреймворки часто используют body для хранения состояния