为什么改变背景颜色javascript不起作用？

Question

＆＃13;

＆＃13;

function changeColor(){
var box = document.getElementById("size");
box.style.background-color ="yellow";
}

＆＃13;

#size{
width: 100px;
height:100px;
transition: all 1s;
cursor: pointer;
}

＆＃13;

<div style="background-color: pink;" id="size" onclick="changeColor()">
</div>

＆＃13;

＆＃13;

＆＃13;

我正在学习javascript，而且我处于非常基础的水平。当用户点击div它改变颜色时，我正在创建一个javascipt函数。但即便是这段简单的代码也行不通。请帮我解决问题所在。谢谢

Answer 1

您应该使用：

box.style.backgroundColor ="yellow";

Answer 2

您需要更改box.style.background-color ="yellow";

到box.style.backgroundColor ="yellow";

有关完整的属性列表，请参阅here

＆＃13;

＆＃13;

function changeColor(){
var box = document.getElementById("size");
box.style.backgroundColor ="yellow";
}

＆＃13;

#size{
width: 100px;
height:100px;
transition: all 1s;
cursor: pointer;
}

＆＃13;

<div style="background-color: pink;" id="size" onclick="changeColor()">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您还可以将该属性用作[]中的字符串：

function changeColor(){
var box = document.getElementById("size");
box.style["background-color"] ="yellow";
}

#size{
width: 100px;
height:100px;
transition: all 1s;
cursor: pointer;
}

<div style="background-color: pink;" id="size" onclick="changeColor()">
</div>