Question

在这里情况：我有两个范围滑块：

<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，但是我绝对不知道如何在CSS中更改JavaScript的值。

这就是我目前所掌握的JavaScript：

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

Answer 1

您可以检查输入事件的范围是否相等以设置 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">

Answer 2

似乎为我工作：

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

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

Answer 3

它运行完美-在声明的末尾还要注意;;。我已经将代码连接到一个按钮，还添加了一个else，因此如果两者不相等，它将改变不透明度：

function changeAction() {
  if (rangeTwo.value == rangeOne.value) {
    document.getElementById("rangeTwo").style.opacity = 0.5;
  } else {
    document.getElementById("rangeTwo").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">
<button onclick="changeAction()">Change Action</button>

Answer 4

我注意到自己和其他张贴者都主张响应外部事件而在元素上设置样式属性。我认为您应该应用/删除一个影响相同样式的类。

这样，我就这样处理了：

"use strict";
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onWindowLoaded, false);

function onWindowLoaded(evt)
{
	byId('rangeTwo').addEventListener('input', onRange2Change, false);
}

function onRange2Change(evt)
{
	if (this.value == byId('rangeOne').value)
		this.classList.add('seeThrough');
	else
		this.classList.remove('seeThrough');
}

.seeThrough
{
	opacity: 0.5;
}

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

通过Javascript更改类的不透明度

4 个答案: