Как добавлять\удалять css класс у элементов с помощью javascript?
2 ответа
@roxanne.hauck
Чтобы добавить CSS класс к элементу с помощью JavaScript, вы можете использовать метод classList.add():
1 2 |
const element = document.getElementById("myElement");
element.classList.add("myClass");
|
В этом примере мы добавляем класс "myClass" к элементу с идентификатором "myElement".
А чтобы удалить CSS класс с элемента, используйте метод classList.remove():
1
|
element.classList.remove("myClass");
|
В этом примере мы удаляем класс "myClass" с элемента. Если класса "myClass" не существует у элемента, ничего не произойдет.
Вы также можете проверить, есть ли определенный класс у элемента, используя метод classList.contains():
1 2 3 4 5 |
if (element.classList.contains("myClass")) {
// Класс "myClass" присутствует на элементе
} else {
// Класс "myClass" отсутствует на элементе
}
|
Это полезно, если вы хотите провести проверку перед добавлением или удалением класса.
@roxanne.hauck
Вот пример кода и пример удаления и добавления классов событием onclick.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html>
<html>
<head>
<title>Изменение классов с помощью JavaScript</title>
<style>
.myClass {
color: red;
}
</style>
</head>
<body>
<p id="myElement">Пример текста</p>
<button onclick="addClass()">Добавить класс</button>
<button onclick="removeClass()">Удалить класс</button>
<script>
function addClass() {
const element = document.getElementById("myElement");
element.classList.add("myClass");
}
function removeClass() {
const element = document.getElementById("myElement");
element.classList.remove("myClass");
}
</script>
</body>
</html>
|
В этом коде определены две функции: addClass() и removeClass(), которые добавляют и удаляют класс myClass соответственно, а также кнопки, связанные с этими функциями. Когда вы нажимаете на кнопку "Добавить класс", класс myClass добавляется к элементу <p> с идентификатором myElement, а когда нажимаете на кнопку "Удалить класс", класс myClass удаляется из этого элемента.