使用Javascript用if语句修改样式表

Using Javascript to change stylesheets with if statement?

本文关键字：修改样式语句 if Javascript 使用更新时间：2023-09-26

我的代码有问题。基本上我想要的是当音量滑块超过一半时，它会变成红色，当它低于一半时，它会变成绿色。我已经创建了样式表，只是不知道如何将它们链接在一起。我离得近吗?谢谢你的反馈。(重点:最后一个功能和Volume1输入)

<!DOCTYPE html>
<html>
<head>
<title>Audio Javascript Demo</title>
<link id="green" rel="stylesheet" type="text/css" title="Red" href="styleSheets/Red.css">
<link id="red" rel="alternate stylesheet" type="text/css" title="Green" href="styleSheets/Green.css">
<script>
var mediaClip; // shortcut for document.getElementById('mediaClip')
function init()
{
// initialise the mediaClip variable  
mediaClip = document.getElementById('mediaClip'); 
// get the length of the audio clip
document.getElementById('clipDuration').innerHTML = 'Length: ' + Math.floor(mediaClip.seekable.end(0) / 60) + ':' + twoDigits(Math.floor(mediaClip.seekable.end(0) % 60));
// updae the displayed data every 300 miliseconds
setInterval(updateDisplayedData,300);
}

function updateDisplayedData()
{
// update the current position
 document.getElementById('currentPosition').innerHTML = 'Current Position: ' + Math.floor(mediaClip.currentTime / 60) + ':' + twoDigits(Math.floor(mediaClip.currentTime % 60)) + "/4:02";
// update the current volume
if(mediaClip.muted)
{
   document.getElementById('currentVolume').innerHTML = 'Volume: MUTED';
}
else
{
  document.getElementById('currentVolume').innerHTML = 'Volume test: ' + Math.floor(mediaClip.currentTime *100  / 243);
}
{
}
}

function playClip()
{
document.getElementById('mediaClip').play();  
}

function pauseMusic()
{
document.getElementById('mediaClip').pause();  
}

function stopClip()
{ 
// There is no stop function.
// Instead, we pause and set the currentTime to 0
document.getElementById('mediaClip').pause();  
document.getElementById('mediaClip').currentTime = 0;
}

function decreaseVolume()
{
// minimum volume is 0  
if(mediaClip.volume > 0)
{
 mediaClip.volume -= 0.01;     
} 
}

function increaseVolume()
{
// maximum volume is 1
if(mediaClip.volume < 1)
{
 mediaClip.volume += 0.01;
}
}

function toggleMute()
{
if(mediaClip.muted)
{
   mediaClip.muted = false;
}
else
{
  mediaClip.muted = true;     
}
}

function toggleControls()
{
if(mediaClip.controls)
{
  mediaClip.controls = false;
}
else
{
  mediaClip.controls = true;     
}
}

function Goto15Secs()
{
mediaClip.currentTime = 15;
}

function twoDigits(number) 
{
if (number < 10) 
{ 
 number = ("0" + number).slice(-2); 
}
return number;
}
function playPause() {
    var mediaClip = document.getElementById("mediaClip");
    if (mediaClip.paused) {
        mediaClip.play();   
    } else {
        mediaClip.pause();
    }
}
function change() {
    var button1 = document.getElementById("button1");
    if (button1.value==="Play") button1.value = "Pause";
    else button1.value = "Play";
}
function setVolume() {
    var mediaClip = document.getElementById("mediaClip");
    mediaClip.volume = document.getElementById("volume1").value;
}
function setTime() {
   var mediaClip = document.getElementById("mediaClip");
   mediaClip.currentTime = document.getElementById("time1").value;
}
function backStart() {
    document.getElementById("mediaClip").currentTime = 0;
}
function upVolume() {
    if (mediaClip.volume < 1)
    {
        mediaClip.volume += 0.1;
    }
}
function downVolume() {
    if (mediaClip.volume > 0)
    {
        mediaClip.volume -= 0.1;
    }
}
function gotoChorus() {
    document.getElementById("mediaClip").currentTime = 55; 
}
function changeColor(sheet) {
    if (document.getElementById("volume1").value > 0.5){
      document.getElementById("Red").setAttribute('href', sheet);
  }
  else{
      document.getElementById("Green").setAttribute('href', sheet);
  }
}
</script>
</head>
<body onload = 'init()'>
<audio id = 'mediaClip' controls src = 'take_me_to_church_hozier.mp3'>  
<p>Your browser does not support the 'audio' tag </p>
</audio>
<br>
<button onclick = 'playClip()'>Play</button>
<button onclick = 'pauseMusic()'>Pause</button>
<button onclick = 'stopClip()'>Stop</button>
<br>
<button onclick = 'decreaseVolume()'>Decrease Volume</button>
<button onclick = 'increaseVolume()'>Increase Volume</button>
<button onclick = 'toggleMute()'>Toggle Mute</button>
<br>
<button onclick = 'toggleControls()'>Toggle Controls</button>
 <br>
<button onclick = 'Goto15Secs()'>Goto 15 Seconds</button>
<br/>
<br/>
<input onclick="change();playPause()" type="button" value="Play" id="button1">
<input type="range" onchange="setVolume();changeColor('styleSheets/Green.css')" id='volume1' min=0 max=1 step=0.01 value='1'/>
<br/>
<button onclick ="backStart()">Reset</button>
<input type="range" onchange="setTime()" id="time1" min="0" max="242" step="2.42" value="0"/>
<br/> 
<button onclick="upVolume()">Volume up 10%</button>
<button onclick="downVolume()">Volume down 10%</button>
<br/>
<button onclick="gotoChorus()">Go to chorus</button>
<div>
<p id='clipDuration'></p>
<p id='currentPosition'></p>
<p id='currentVolume'></p>
</div>
</body>
</html>

给出你的代码，我会:

1)删除(或)任何CSS样式表不是默认的(所以只留下默认的，将在页面加载时出现)。删除属于该样式表的<link>元素。

2)将剩余的<link>元素的id从red或green重命名为styles

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样式，但不是有两个样式表，他们可以在主样式表(或者可能是一个单独的themes样式表)。你需要做的主要事情是更新你的样式，使red样式表中的所有规则都以.red开始…例如:

.red button{...

.red input{...

.red p{...

等等，你也会对绿色做同样的事情。

在此之后，要更改样式，您所要做的就是更新页面上父元素之一的类(甚至是<body>元素，尽管我不建议这样做)。

要使用JavaScript更新一个类，可以使用:

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

更改CSS类，而不是样式表。我要做的是创建一个"红色"CSS类和一个"绿色"CSS类，然后像这样做:

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

我不会有一个完整的样式表来改变一件事，但你可以使用下面的函数:

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

你会给你的CSS include一个ID styles:

<link type="text/css" rel="stylesheet" id="styles" href="styleSheets/Red.css">

那么你会这样做:

changeStyleSheet("styleSheets/Green.css")

if语句类似于:

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

您可能想要添加一个事件监听器(onchange ?)到您的滑块，然后每次运行检查