Атрибут class тега <button>
Описание
Атрибут class позволяет назначать кнопке один или несколько CSS-классов для стилизации и взаимодействия через JavaScript. Классы могут использоваться для визуального оформления и логической группировки элементов.
<button class="btn btn-primary" type="submit">
Отправить форму
</button>
| Аспект | Описание | Примечание |
|---|---|---|
| Синтаксис | Пробел-разделенный список классов | class="class1 class2 class3" |
| Стилизация | Позволяет применять CSS-правила | Используйте осмысленные имена |
| JavaScript | Доступ через classList и другие методы | element.classList.contains() |
Рекомендации по использованию:
- Используйте БЭМ или другие методологии именования
- Разделяйте стилевые и функциональные классы
- Избегайте избыточного количества классов
- Для состояний используйте префиксы (is-active, has-error)
<!-- Пример с несколькими классами -->
<button class="button button--large button--primary">
Большая основная кнопка
</button>
<style>
.button {
padding: 8px 16px;
border: none;
}
.button--large {
padding: 12px 24px;
}
.button--primary {
background-color: blue;
color: white;
}
</style>
Работа с классами через JavaScript:
<button class="toggle-btn" id="myButton">
Переключатель
</button>
<script>
const btn = document.getElementById('myButton');
btn.addEventListener('click', function() {
this.classList.toggle('active');
});
</script>
Особенности:
- Классы можно динамически добавлять/удалять через JavaScript
- Поддерживается всеми браузерами
- Не влияет на семантику, только на представление и поведение
- Может использоваться для селекторов в CSS и JS
Примечание: Хотя class является универсальным атрибутом, старайтесь соблюдать единую систему именования классов в проекте для поддержания чистоты кода.