Javascript 使用 if 语句更改样式表

Question

上一篇文章太长了，所以想把它缩短..基本上是功能有问题，至少我认为这是问题所在。目的是当音量或 slider 超过 50 时，颜色变为红色，低于 50 时，颜色变为绿色。

Javascript:

    function changeColor(sheet) {
    document.getElementById("Green").setAttribute('href', sheet);
    document.getElementById("Red").setAttribute('href', sheet);

    if (mediaClip.volume < 0.5)
    {
      changeColor("styleSheets/Green.css");
    }
  else
    {
      changeColor("styleSheets/Red.css");
    }

HTML:

<input type="range" onchange="setVolume();changeColor()" id='volume1' min=0 max=1 step=0.01 value='1'/>

感谢所有反馈，如果能在晚上结束前完成这项工作，那就太好了。请记住，我是编码新手，所以越简单越好。

Answer 1

如果您只想更改输入的颜色，您可以将事件监听器附加到您的输入并使用它来更改样式。如下例所示:

window.onload = function(){
    document.getElementById("volume1").addEventListener("change", function(){
        if (mediaClip.volume < 0.5){
            this.style.backgroundColor = 'green';
        }else{
            this.style.backgroundColor = 'red';
        }
    });
}

HTML(请注意，如果添加事件监听器，则不需要使用 onchange 触发器)

<input type="range" id='volume1' min=0 max=1 step=0.01 value='1'/>