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

我的代码有问题。。基本上，我想要的是当音量滑块超过一半时，它会变成红色，当它低于一半时，它会变成绿色。我已经创建了样式表，但我不知道如何将它们链接在一起。我接近了吗？谢谢你的反馈。（焦点：最后一个函数和卷1输入）

音频Javascript演示
var mediaClip；//document.getElementById（'mediaClip'的快捷方式）
函数init（）
{
//初始化mediaClip变量
mediaClip=document.getElementById（'mediaClip'）；
//获取音频剪辑的长度
document.getElementById（'clipDuration'）.innerHTML='Length:'+Math.floor（mediaClip.seekable.end（0）/60）+'：'+两位数（Math.floor（mediaClip.seekable.end（0）%60））；
//updae每300毫秒更新一次显示的数据
setInterval（updateDisplayData，300）；
}
函数updateDisplayData（）
{
//更新当前位置
document.getElementById（'currentPosition'）.innerHTML='currentPosition:'+数学地板（mediaClip.currentTime/60）+'：'+两位数（数学地板（mediaClip.currentTime%60））+“/4:02”；
//更新当前卷
if（mediaClip.mute）
{
document.getElementById（'currentVolume'）.innerHTML='Volume:MUTED'；
}
其他的
{
document.getElementById（'currentVolume'）.innerHTML='Volume test:'+Math.floor（mediaClip.currentTime*100/243）；
}
{
}
}
函数playClip（）
{
document.getElementById（'mediaClip'）.play（）；
}
函数pauseMusic（）
{
document.getElementById（'mediaClip'）.pause（）；
}
函数stopClip（）
{ 
//没有停止功能。
//相反，我们暂停并将currentTime设置为0
document.getElementById（'mediaClip'）.pause（）；
document.getElementById（'mediaClip'）。currentTime=0；
}
函数decreaseVolume（）
{
//最小音量为0
如果（mediaClip.volume>0）
{
mediaClip.volume-=0.01；
} 
}
函数increaseVolume（）
{
//最大容量为1
如果（mediaClip.volume<1）
{
mediaClip.volume+=0.01；
}
}
函数toggleMute（）
{
if（mediaClip.mute）
{
mediaClip.muted=false；
}
其他的
{
mediaClip.muted=true；
}
}
函数toggleControls（）
{
if（mediaClip.controls）
{
mediaClip.controls=false；
}
其他的
{
mediaClip.controls=true；
}
}
函数Goto15Secs（）
{
mediaClip.currentTime=15；
}
功能两位数（数字）
{
如果（数字<10）
{ 
数字=（“0”+数字）.slice（-2）；
}
返回号码；
}
函数playPause（）{
var mediaClip=document.getElementById（“mediaClip”）；
如果（mediaClip.paused）{
mediaClip.play（）；
}否则{
mediaClip.pause（）；
}
}
函数更改（）{
var button1=document.getElementById（“button1”）；
如果（button1.value==“播放”）button1.value=“暂停”；
else按钮1.value=“播放”；
}
函数setVolume（）{
var mediaClip=document.getElementById（“mediaClip”）；
mediaClip.volume=document.getElementById（“volume1”）.value；
}
函数setTime（）{
var mediaClip=document.getElementById（“mediaClip”）；
mediaClip.currentTime=document.getElementById（“time1”）.value；
}
函数backStart（）{
document.getElementById（“mediaClip”）.currentTime=0；
}
函数upVolume（）{
如果（mediaClip.volume<1）
{
mediaClip.volume+=0.1；
}
}
函数downVolume（）{
如果（mediaClip.volume>0）
{
mediaClip.volume-=0.1；
}
}
函数gotoChorus（）{
document.getElementById（“mediaClip”）.currentTime=55；
}
功能更改颜色（第页）{
if（document.getElementById（“volume1”）.value>0.5）{
document.getElementById（“红色”）.setAttribute（'href'，sheet）；
}
否则{
document.getElementById（“绿色”）.setAttribute（'href'，sheet）；
}
}
您的浏览器不支持“音频”标记



玩
暂停
停止


减少体积
增加容量
切换静音


切换控件


转到15秒






重置


成交量上升10%
成交量下降10%


合唱

更改CSS类，而不是样式表。我要做的是创建一个“红色”CSS类和一个“绿色”CSS类，然后执行如下操作：

document.getElementById("MyElement").className = "red";

---

我没有完整的样式表来更改一件事，但您可以使用以下函数：

function changeStyleSheet(styleSheetName){
    document.getElementById("styles").setAttribute("href", styleSheetName);
}

您应该为CSS提供一个样式ID：

然后你会做：

changeStyleSheet("styleSheets/Green.css")

if

语句类似于：

// Random number used, assuming 100 is the maximum value.
if (mySlider == 50) {
    changeStyleSheet("newStyleSheet");
} else {
    changeStyleSheet("newStyleSheet");
}

---

您可能希望将事件侦听器（

onchange

？）添加到滑块中，然后每次都运行检查。

根据您的代码，我会：

1）删除（或

）任何CSS样式表都不是默认样式（因此只保留加载页面时出现的默认样式）。删除属于该样式表的

元素

2）将剩余的

元素的

id

从

红色

或

绿色

重命名为

样式

3）按如下方式更新您的功能：

function changeColor() { 
  if (document.getElementById("volume1").value > 0.5){ 
    document.getElementById("styles").setAttribute('href', "styleSheets/Red.css"); 
  } else { 
    document.getElementById("styles").setAttribute('href', "styleSheets/Green.css"); 
  }
}

但是…

这不是更新页面样式的最佳方式

更好的方法是仍然使用红色和绿色css样式，但是它们可以放在主样式表中（或者单独的

主题
样式表），而不是有两个样式表。您需要做的主要事情是更新样式，以便
red
样式表中的所有规则都以
.red
开头…例如：

。红色按钮{…

.red输入{…

.redp{…

诸如此类，你也会为格林做同样的事

在此之后，要更改样式，只需更新页面上某个父元素的类（即使是
元素，但我不建议这样做）

要使用JavaScript更新类，可以使用：

document.getElementById("container").classList.add('red');
document.getElementById("container").classList.remove('green');

您在这里为一个相当简单的问题提供了大量代码。您是否尝试将问题减少到绝对最小的用例？尝试发布尽可能少的代码
document.getElementById("container").classList.add('red');
document.getElementById("container").classList.remove('green');