如何根据开关 slider position 更改不透明度？

Question

我有一个开关 slider 并且想知道如何使“非活动”元素的不透明度降低。 我应该使用什么来跟踪 slider 的 position？ 有没有办法用纯 css 或 JavaScript 制作它？ 开关 slider 具有绝对 position 并随着变换 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">eg 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">eg a Wordrobe</div> </div> </div> </div>

Answer 1

您可以使用 javascript 修改所需元素的 HTML 样式属性。 这就像做内联 styles。

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