Как добавить, допустим, элементу с классом "main" класс "main--main-bg" при клике на элемент с классом "intro__btn"? И чтобы при клике на другой элемент с классом "intro__btn" класс "main--main-bg" удалялся у элемента с классом "main" и присваивался другой, указанный класс. Сам в JS не очень шарю, а в интернете готового не нашел на чистом JS, а ради этого загружать целый jQuery не хочется, т.к. глупо.
1 ответ
Вот так
var btns = document.getElementsByClassName('intro__btn');
var par = document.getElementsByClassName('main');
btns[0].onclick = function() {
par[0].classList.add("main--main-bg");
}
btns[1].onclick = function() {
par[0].classList.remove("main--main-bg");
}
.main {
color: red;
}
.main--main-bg {
background-color: green;
}
<p class="main">TEXT</p>
<button class="intro__btn">Добавить класс</button>
<button class="intro__btn">Удалить класс</button>
-
А массивы нужны для выбора элемента из класса иначе вернет undefined– user24515013 мая 2017 в 12:20
-
Спасибо большое! Все работает. Но можете, пожалуйста, еще немного помочь?) Дело в том, что там 3 класса, нужно при клике на определенную кнопку, добавлять определенный класс. У меня, вроде, это сделать получилось. Но вот удаление - нет =) Получилось сделать удаление определенного класса лишь при нажатии на кнопку, которая его добавила. codepen.io/SilencerWeb/pen/rmvKym?editors=1100 13 мая 2017 в 12:48
-
Вам нужна чтобы кнопка и удаляла и добавляла класс? или как?– user24515013 мая 2017 в 12:50
-
Да, я представляю это так: например, нажатие на кнопку "intro__btn--main", происходит удаление всех классов, кроме "main" и присваивается определенный... 13 мая 2017 в 12:58
-
Если бы вы не использовали pug я бы помог– user24515013 мая 2017 в 13:06