Блог

Главная - Вопросы по программированию - Переключение между активным / неактивным классом состояния с помощью Eventlisteners

Переключение между активным / неактивным классом состояния с помощью Eventlisteners

#javascript #css #frontend

#javascript #css #интерфейс

Вопрос:

Я создаю страницу входа на веб-сайт, и в качестве метки для флажка есть кнопка переключения, но я не могу переключить активное / неактивное состояние класса, создав список событий click с помощью JavaScript. Любая помощь будет оценена.

 let switcher = document.getElementsByClassName('switch')[0];
switcher.addEventListener('click', () => {
    switcher.toggle = 'active';
}) 
 input[type="checkbox"] {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.switch {
    display: inline-block;
    padding: 4px;
    height: 22px;
    width: 60px;
    background-color: rgb(110,116,143);
    border-radius: 20px;
}

.slider{
    display: inline-block;
    border-radius: 20px;
    background-color: rgb(255,255,255);
    width: 22px;
    height: 22px;
}

.switch.active {
    background-color: rgb(16,89,255);
}

.switch.active > .slider{
    margin-left: 38px;
}

.remember {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 80%;
    margin: 0px auto;
    font-weight: 500;
}

label[for="remember"]:last-of-type > span {
    font-size: 14px;
    position: relative;
    bottom: 5px;
} 
 <div class="remember">
  <label class="switch" for="remember">
    <span class="slider"></span>
  </label>
  <input type="checkbox" name="remember" id="remember">
  <label for="remember"><span>KEEP ME SIGNED IN</span></label>
</div>

Ответ №1:

Вы можете переключать имена классов, используя свойство classList элемента следующим образом (https://developer.mozilla.org/en-US/docs/Web/API/Element/classList ):

 switcher.classList.toggle('active');
Метки: