Чтобы добавить класс к элементу при клике на кнопку, можно использовать JavaScript (или другие фреймворки/библиотеки, такие как jQuery). Вот основной пример с использованием чистого JavaScript:
1. У вас есть кнопка и элемент, которому вы хотите добавить класс:
```html
<button id="myButton">Нажми на меня</button>
<div id="myElement">Элемент для изменения</div>
```
2. Вы добавляете слушатель событий к этой кнопке в JavaScript:
```javascript
// Получение доступа к кнопке по ID
var button = document.getElementById('myButton');
// Добавление слушателя событий на клик
button.addEventListener('click', function() {
// Получение элемента, к которому нужно добавить класс
var element = document.getElementById('myElement');
// Добавление класса к этому элементу
element.classList.add('new-class');
});
```
3. Определить стиль для класса, который вы хотите добавить:
```css
.new-class {
color: red;
font-weight: bold;
}
```
Теперь, когда вы кликаете на кнопку с ID `myButton`, элементу с ID `myElement` будет добавлен класс `new-class`, что изменит его стиль согласно определению в CSS.
Обратите внимание, что метод `classList.add()` безопасен для использования даже в том случае, если у элемента уже есть другие классы – он просто добавит новый класс к уже существующим, не затрагивая их.
Если вы хотите переключать класс (т.е., добавлять, если его нет, и удалять, если он есть), вы можете использовать метод `classList.toggle()`:
```javascript
element.classList.toggle('new-class');
```
Этот код будет переключать класс `new-class` каждый раз, когда пользователь кликает на кнопку.