时间戳

首页 > 解决方案 > 通过 Javascript 更改类的不透明度

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

问题描述

情况如下：我有两个范围滑块：

<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;;
  }
}

标签： javascripthtmlcss

解决方案

您可以检查输入事件的范围是否相等以设置opacity属性：

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">

推荐阅读