0

Задача заключается в том, чтобы при клике на слайдер подменивался стилевой файл в html, скопипастил основной стилевой файл и поменял ему название со style.css на style_green.css, получается при клике на слайдер некоторые элементы сайта станут салатового оттенка, в js пока новичок поэтому никак не могу разобраться как это реализовать. Идея есть, а реализация хромает. Ниже код слайдера.

<div class="theme-changer position-absolute">
                            <label class="switch">
                                <input type="checkbox">
                                <span class="slider round"></span>
                              </label>
                        </div>
                    </div>
.theme-changer {
    left: -100%;
    top: 40%;
    width: max-content;
    z-index: 10;
}
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {display:none;}
  
  /* The slider */
  .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);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
let switchTheme = document.querySelector('.slider.round');
let navLogo = document.querySelector('.nav-logo');

1 ответ 1

0

Добавьте стили для "салатового оттенка" в тот же файл и при клике меняйте class, а не файл.

function myFunction()
{
    document.getElementById('slider').setAttribute("class", "style-after");
}
.style-before{
    background-color:#ccc;
    width:40px;
    height:20px;
}

.style-after{
    background-color:#99ff99;
    width:40px;
}
<div id="slider" class="style-before"><span onclick="myFunction()">Slider</span></div>

Ваш ответ

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

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