Question

我有一个id为#one的div。我将背景颜色设置为红色。我希望选项在单击div时将其更改为随机颜色，因此我创建了一个函数来执行此操作。我的问题：

为什么在JS中编写'background-color'而不是'backgroundColor'时它不起作用？如果我写'background-color'，那么我得到一个错误，说操作员左边有一个错误的分配。提前谢谢！

代码：

https://codepen.io/simonrevill/pen/pLebyj

//This works:

var col = '#'+Math.floor(Math.random()*16777215).toString(16);

function change() {
  document.getElementById("one").style.backgroundColor=col;
}

//This doesn't:

var col = '#'+Math.floor(Math.random()*16777215).toString(16);

function change() {
  document.getElementById("one").style.background-color=col;
}

Answer 1

要在JavaScript中指定包含短划线的CSS属性，只需删除短划线即可。例如，background-color变为backgroundColor，border-radius属性变为borderRadius，依此类推。

您无法在JavaScript中使用-，因为-是一个特殊关键字。例如，如果您使用：

background-color

这意味着您要减去两个变量background和color。

您的代码只更改一次背景颜色，如果您想在每次更改颜色，那么您需要：

let r1 = Math.floor(Math.random() * 255);
let r2 = Math.floor(Math.random() * 255);
let r3 = Math.floor(Math.random() * 255);
element.style.backgroundColor = `rgb(${r1},${r2},${r3})`;

Answer 2

Javascript属性和变量使用驼峰大小写语法。此外，在这种情况下禁止破折号，因为它们将被解释为减法运算符。这就是你得到这个错误的原因。

为什么背景颜色属性不可分配

2 个答案: