Question

以前的帖子太长了，所以试图缩短它。基本上这个功能有问题，至少那个我认为问题是什么。目的是当音量或滑块超过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

不应交换样式表，而应在页面中包含两个样式表并换出输入的类名。

function changeColor() {
    document.getElementById('range').className = mediaClip.volume < 0.5 ? green : red;
}

这假设您的范围输入被分配了ID值＆＃34;范围＆＃34;。

Answer 2

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

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'/>

Answer 3

最好的解决方案是在页面中包含的css文件中定义两个类。一个css文件优于两个。

.red {
    background-color: red;
}
.green {
    background-color: green;
}

然后使用JavaScripts className根据条件设置类。您也可以使用setAttribute("class", className)。在您的换色目标中添加一个ID，我在我的示例中使用了#colour-change-target。

if (mediaClip.volume < 0.5) {
    document.getElementById('#colour-change-target').className = 'red';
} else {
    document.getElementById('#colour-change-target').className = 'green';
}

使用if语句更改样式表的Javascript

3 个答案: