Question

我需要在此网页上设置serval按钮来更改

颜色和背景颜色。这是实际的文本和CSS文件加上javascript

＆＃13;

function changeForeground() {
  var div = document.getElementById("foreground").className = "colorA";
}

function changeBackground() {
  var div = document.getElementById("background").className = "backgroundB";
}

＆＃13;

.colorA {
  color: #4581cf;
}
.colorB {
  color: #B7E2FF;
}
.backgroundA {
  background-color: #4581cf;
}
.backgroundB {
  background-color: #B7E2FF;
}

＆＃13;

<div id="background" class="backgroundA">
  <div id="foreground" class="colorB">
    <p>blah blah blah</p>
  </div>
</div>

Foreground
<INPUT type="button" Value="A" class="colorA" id="button1" onclick="changeForeground()" ;>
<INPUT type="button" Value="B" class="colorB" id="button2" onclick="changeForeground()" ;>Background
<INPUT type="button" Value="C" class="backgroundA" id="button3" onclick="changeBackground()" ;>
<INPUT type="button" Value="D" class="backgroundB" id="button4" onclick="changeBackground()" ;>

＆＃13;

现在我只能通过键入实际的类来更改文本颜色，例如＆＃34; colorA＆＃34;和＆＃34; backgroundB＆＃34;在我通过Id得到元素以改变颜色之后。但我想要做的是在javascript函数中，如何根据我点击的按钮更改文本颜色。我的意思是在我通过Id得到元素之后，例如＆＃34;前景＆＃34;，如果我只是点击按钮A，我如何将其当前类（colorB）更改为类（colorA）

Answer 1

将班级名称传递给function并使用

function changeForeground(cls){
  var div = document.getElementById("foreground").className=cls;
}
                                        
function changeBackground(cls){
  var div = document.getElementById("background").className=cls;
}

.colorA{
      color: #4581cf;
    }

    .colorB{
      color: #B7E2FF;
    }

    .backgroundA{
      background-color: #4581cf;
    }

    .backgroundB{
      background-color: #B7E2FF;
    }

<div id="background" class="backgroundA">
   <div id="foreground" class="colorB">
        <p>blah blah blah</p>
   </div>
</div>

Foreground 
    <INPUT type="button" Value="A" class="colorA" id="button1" onclick ="changeForeground('colorA')";>
    <INPUT type="button" Value="B" class="colorB" id="button2" onclick ="changeForeground('colorB')";>

Background
    <INPUT type="button" Value="C" class="backgroundA" id="button3" onclick ="changeBackground('backgroundA')";>
    <INPUT type="button" Value="D" class="backgroundB" id="button4" onclick ="changeBackground('backgroundB')";>

Answer 2

试试这个：

function changeForeground()
{
    var div = document.getElementById("foreground").style.color = "#4581cf";
}

function changeBackground()
{
    var div =    document.getElementById("background").style.backgroundColor = "#B7E2FF";
}

Answer 3

使用jquery

尝试此操作

     function changeForeground()
        {var div = $(#foreground).css('color' :'#4581cf');}

使用javascript更改文本颜色和背景颜色

3 个答案: