Question

按下按钮时背景颜色不会改变。我做错了什么？

var body = document.getElementsByTagName("body");
var bgbutton = doucument.getElementById("bgchange");
bgbutton.onclick = function() {
  body.style.background-color = "green";
}

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
}

<div id="wrapper"></div>
<button id="bgchange"></button>

Answer 1

document.getElementsByTagName会返回一个节点列表，因此您需要从[0]中选择一个元素：

var body = document.getElementsByTagName("body")[0];

但是，您可以使用特定属性：

var body = document.body;

您在下面的行中也有拼写错误：

var bgbutton = doucument.getElementById("bgchange");

......应该是document ...

并且，当用JavaScript编写时，样式属性名称在camelCase中：

body.style.backgroundColor

...而不是用CSS（background-color）编写它们的方式。

Answer 2

这是错误的：

body.style.background-color = "green";

它必须是：

body.style = "background-color:green"

Answer 3

首先，语法错误“doucument”

 var bgbutton = doucument.getElementById("bgchange");

第二

var body = document.getElementsByTagName("body");

当您通过标记或 ClassName 搜索dom元素时，在javascript中必须指定要修改的元素索引，在这种情况下是第一个。

var body = document.getElementsByTagName("body")[0]

上面有一个简写如何制作，document.getElementsByTagName返回一个HTMLCollection，将dom元素作为数组包含在变量体中，你必须将它作为具有特定索引的数组中的项来访问。

这也有效：

 var body = document.getElementsByTagName("body").item(0);

body.style.background-color应为body.style.backgroundColor

var body = document.getElementsByTagName("body").item(0);
    var bgbutton = document.getElementById("bgchange");
    bgbutton.onclick = function() {
    body.style.backgroundColor = "green";
    }

body {
    width: 600px;
    margin: 0 auto;
    background-color: #FF9500;
    padding: 0 20px 20px 20px;
    }

<div id="wrapper"></div>
    <button id="bgchange"></button>

Answer 4

除了trincot已经提到的所有内容之外，在按钮标记中添加一些内容，以便更容易点击。

＆＃13;

var bgbutton = document.getElementById("bgchange");
bgbutton.onclick = function() {
  document.body.style.backgroundColor = "green";
}

＆＃13;

body {
  background-color: #FF9500;
}

＆＃13;

<button id="bgchange">Change color</button>

＆＃13;

Javascript按钮单击更改背景

4 个答案: