Блог

Главная - Вопросы по программированию - Как изменить непрозрачность в зависимости от положения ползунка переключателя?

Как изменить непрозрачность в зависимости от положения ползунка переключателя?

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть ползунок переключения, и мне интересно, как я мог бы сделать так, чтобы «неактивный» элемент имел меньшую непрозрачность. Что я должен использовать для отслеживания положения ползунка? Есть ли способ сделать это с помощью чистого css или обязательно требуется JavaScript? Ползунок переключателя имеет абсолютное положение и перемещается с помощью свойства transform css, поэтому я не понимаю, как создать логику его поведения.

 .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 10px;
    margin-top: 15px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: -74px;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    width: 187px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: -3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid grey;
  }
  
  input:checked   .slider {
    background-color: #13985C;
  }
  
  input:focus   .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
input:checked   .slider:before {
    -webkit-transform: translateX(120px);
    -ms-transform: translateX(120px);
    transform: translateX(162px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
  }
  
.slider.round:before {
    border-radius: 50%;
}

.row-inputs-radio {
    display: flex;
    justify-content: space-between;
}

.item-size {
    margin-left: 10px;
}

.item-size-eg {
    font-size: 15px;
    color: rgb(155, 154, 154);
} 
 <div class="row-inputs row-inputs-radio">
            <div class="row-input">
              <div class="item-size">Medium</div>
              <div class="item-size-eg">e.g. a 2 seat sofa</div>
            </div>
            <div class="row-input">
              <label class="switch">
                <input type="checkbox" checked />
                <span class="slider round"></span>
              </label>
            </div>
            <div class="row-input">
              <div class="item-size">Medium</div>
              <div class="item-size-eg">e.g. a Wordrobe</div>
            </div>
          </div>
          
            
          </div>

Ответ №1:

Вы можете изменить атрибут стиля HTML нужного вам элемента с помощью javascript. Это так же, как делать встроенные стили.

https://www.w3schools.com/jsref/prop_html_style.asp