如何根據開關 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