Javascript 用 if 语句改变样式表答案

【问题标题】：Javascript changing stylesheets with if statementsJavascript 用 if 语句改变样式表
【发布时间】：2015-09-29 08:27:50
【问题描述】：

以前的帖子太长了，所以想把它缩短一下。基本上功能有问题，至少这是我认为的问题所在。目的是当音量或滑块超过 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'/>

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

【问题讨论】：

我认为你可能缩短了太多。您的 changeColor 函数看起来像是有一个 if 语句调用自己...？
就像我说的我是新手，我不确定你的意思，显然有问题，你能告诉我一个解决方案吗？
你为什么要通过改变样式表来改变颜色？

标签： javascript css html if-statement

【解决方案1】：

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

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

这是假设您的范围输入被分配了 ID 值“范围”。

【讨论】：

【解决方案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'/>

【讨论】：

【解决方案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';
}

【讨论】：