javascript - 通过 Javascript 更改类的不透明度

Question

情况如下: 我有两个范围 slider :

<input id="rangeOne" disabled class="range" type="range" min="0" max="10" value="3">

和

<input id="rangeTwo" class="range" type="range" min="0" max="10" value="8">

如果 rangeTwo 等于 rangeOne，它的不透明度必须更改为 0.5，但我完全不知道如何让 JavaScript 在 CSS 中更改值。

这是我目前拥有的 JavaScript:

function changeAction() {
  if (rangeTwo.value == rangeOne.value) {
    document.getElementById("rangeTwo").style.opacity = 0.5;;
  }
}

Answer 1

您可以检查输入事件的范围是否相等以设置不透明度属性:

document.querySelector('#rangeTwo').addEventListener('input', function(){
  if(this.value < document.querySelector('#rangeOne').value)
    this.style.opacity = 0.5;
  else
    this.style.opacity = 1;
});

<input id="rangeOne" disabled class="range" type="range" min="0" max="10" value="3">
<input id="rangeTwo" class="range" type="range" min="0" max="10" value="8">