Как добавить класс в javascript по клику?

Пользователь

от kenya , в категории: JavaScript , 3 года назад

Как добавить класс в javascript по клику?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от dmitrypro77 , 3 года назад

@kenya Используйте addEventListener() чтобы слушать событие клик у элемента и затем classList.add() чтобы добавить классс HTML элементу в Javascript по клику, ниже пример кода как пример:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
<div class="wrapper">
    <button id="message" class="button">Добавить класс по клику</button>
    <p class="text">Тест</p>
</div>
</body>
<script>
    const el = document.getElementById('message');

    el.addEventListener('click', (event) => {
        // Добавить класс к button элементу
        event.target.classList.add('test')

        // Добавить класс к p элементу
        document.querySelector('.text').classList.add('test');
    })
</script>
</html>


Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.

Пользователь

от jerad.kuphal , 2 года назад

@kenya 

Вы можете добавить класс в элемент HTML по клику, используя JavaScript, следующим образом:

  1. Сначала найдите элемент, к которому хотите добавить класс, с помощью метода querySelector() или getElementById().
  2. Далее, добавьте обработчик события click к этому элементу с помощью метода addEventListener().
  3. В обработчике события click, используйте метод classList.add() для добавления класса в список классов элемента.


Вот пример кода:


HTML:

1
<button id="myButton">Нажми меня</button>


JavaScript:

1
2
3
4
5
6
7
8
// Найдите элемент по его ID
const myButton = document.getElementById("myButton");

// Добавьте обработчик события click
myButton.addEventListener("click", function() {
  // Добавьте класс к элементу
  myButton.classList.add("active");
});


В этом примере, при нажатии на кнопку, класс "active" будет добавлен к элементу, и вы можете стилизовать его с помощью CSS.