3

Как добавить, допустим, элементу с классом "main" класс "main--main-bg" при клике на элемент с классом "intro__btn"? И чтобы при клике на другой элемент с классом "intro__btn" класс "main--main-bg" удалялся у элемента с классом "main" и присваивался другой, указанный класс. Сам в JS не очень шарю, а в интернете готового не нашел на чистом JS, а ради этого загружать целый jQuery не хочется, т.к. глупо.

1 ответ 1

6

Вот так

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>

10
  • А массивы нужны для выбора элемента из класса иначе вернет undefined
    – user245150
    13 мая 2017 в 12:20
  • Спасибо большое! Все работает. Но можете, пожалуйста, еще немного помочь?) Дело в том, что там 3 класса, нужно при клике на определенную кнопку, добавлять определенный класс. У меня, вроде, это сделать получилось. Но вот удаление - нет =) Получилось сделать удаление определенного класса лишь при нажатии на кнопку, которая его добавила. codepen.io/SilencerWeb/pen/rmvKym?editors=1100 13 мая 2017 в 12:48
  • Вам нужна чтобы кнопка и удаляла и добавляла класс? или как?
    – user245150
    13 мая 2017 в 12:50
  • Да, я представляю это так: например, нажатие на кнопку "intro__btn--main", происходит удаление всех классов, кроме "main" и присваивается определенный... 13 мая 2017 в 12:58
  • Если бы вы не использовали pug я бы помог
    – user245150
    13 мая 2017 в 13:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.