Question

我制作了这段代码，但它无法正常工作。如果有人可以帮助我会很好。：）

我已经尝试了很多东西，但它总是没有用。

我希望它能让你按下按钮，背景变亮，再次按下它会回到原点。

WHERE

Answer 1

您必须使用className而不是class。 class不是属性on a DOM element。

Answer 2

您需要修改元素上的className属性，而不是class。

例如：

document.getElementById('bdbackground').className = 'darkerBG';

Answer 3

在JavaScript中，正确的属性为<form>...</form>，而不是.className。您在.class

的作业中也有错误的==

或者，请考虑使用document.getElementById('bdbackground').class == 'lighterBG';。

.classList.contains(...)

Answer 4

我已经为您要实现的目标创建了一个可行的解决方案。我使用该解决方案创建了一个JSBin并稍微改进了您的代码：http://jsbin.com/botasehoci/1/edit?html,css,js,output

（编辑，刚刚注意到Quantastical回答了我在发布这个答案时提出的几乎所有问题：/）

主要问题是：

您需要在按钮元素上添加ID bdbackground。
您需要在按钮元素上包含初始类名（＆＃34; lighterBG＆＃34;）
引用class属性值的正确方法是使用className而非class
对于if语句中的第一个条件，您使用了比较而不是赋值运算符（即x == a而不是x = a）

这是更新的JS：

function changeColor() {
    var button = document.getElementById('bdbackground');
    var buttonClass = button.className;

    if (buttonClass === 'darkerBG') {
        button.className = 'lighterBG';
    } else if (buttonClass === 'lighterBG') {
        button.className = 'darkerBG';
    }
}

这是按钮元素的更新HTML：

 <input id="bdbackground" type="button" class="lighterBG" value="test" onclick="changeColor()">

Answer 5

<强> .classList()

使用.classList.remove()和.classList.toggle()来切换课程。您可以使用changeColor()但在某些情况下，如果同时使用多个切换器，则切换状态将被解除混乱。

基本流程

调用函数getElementById()时：

使用.darkerBG
使用.classList.contains()

.darkerBG

如果它有.lighterBG作为一个类：
- 删除课程......
- 添加课程.lighterBG
否则：
- 删除课程.darkerBG和...
- 添加课程function changeColor() { var bG = document.getElementById('bdbackground'); if (bG.classList.contains('darkerBG')) { bG.classList.remove('darkerBG'); bG.classList.add('lighterBG'); } else { bG.classList.add('darkerBG'); bG.classList.remove('lighterBG'); } }

段

＆＃13;

.darkerBG {
  background: rgba(20, 10, 20, .6);
  transition: all 2s;
}
.lighterBG {
  background: rgba(200, 100, 200, .6);
  transition: all 2s;
}

＆＃13;

<html>

<head>
  <title>test</title>

</head>

<body class="darkerBG" id="bdbackground">




  <input type="button" class="button" value="test" onclick="changeColor()">

</body>

</html>

＆＃13;

{{1}}

＆＃13;

Answer 6

您可以class / add()或remove()使用className或classList，而不是使用toggle()。

要检查类是否存在，您可以按getAttribute('class')获取元素属性（类），然后使用类字符串indexOf()在其中搜索。

为了获得最佳效果，请尝试避免使用内联事件，而是使用addEventListener。

https://jsfiddle.net/5m5ck1fk

//btn = document.querySelector('.button');
var btn = document.getElementsByClassName('button')[0],
    bdBackground = document.getElementById('bdbackground');

btn.addEventListener('click', function () {
  changeColor();
});

function changeColor() {
  if (bdBackground.getAttribute('class').indexOf('darkerBG') != -1) {
    bdBackground.classList.remove('darkerBG');
    bdBackground.classList.add('lighterBG');
  } else if (bdBackground.getAttribute('class').indexOf('lighterBG') != -1) {
    bdBackground.classList.remove('lighterBG');
    bdBackground.classList.add('darkerBG');
  }
}

.darkerBG {
  background: #282828;
}
.lighterBG {
  background: white;
}

<body class="darkerBG" id="bdbackground">
  <input type="button" class="button" value="test">
</body>

JavaScript的;背景颜色改变并改变相同的输入

6 个答案:

基本流程

段