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

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

kenya

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

43 | 0

programminglanguage

2 ответа

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

dmitrypro77

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

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

<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>

1 | 0

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

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

jerad.kuphal

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

@kenya

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

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

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

HTML:

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

JavaScript:

// Найдите элемент по его ID
const myButton = document.getElementById("myButton");

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

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

0 | 0

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

2 ответа

Похожие обсуждения: