Как сделать переключатель на javascript

Узнайте как легко создать переключатель с помощью JavaScript. Пример настройки с подробным объяснением шагов поможет вам установить переключатель на сайте.

Переключатель (также известный как переключатель выбора) на JavaScript представляет собой простой элемент управления, который позволяет пользователям выбрать между двумя или более вариантами. Например, администратор может использовать переключатель для включения/отключения функций сайта. Пример переключателя выбора на основе JavaScript может выглядеть так:

// HTML
<input type="checkbox" id="switch" class="switch">
<label for="switch"></label>

// CSS
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

// JavaScript
const switchElement = document.querySelector('.switch');
const switchInput = switchElement.querySelector('input');

switchInput.addEventListener('change', () => {
  const isChecked = switchInput.checked;
  console.log('Switch is ' + (isChecked ? 'On' : 'Off'));
});

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

Вот и все, что нужно знать о создании переключателя на JavaScript. Это простой и полезный элемент управления, который может быть использован для реализации различных функций.