Question

一个非常简单的尝试，我只想设法一起使用HTML和JS，但是经过代码十几次我无法找到问题。（点击框后我希望它改变颜色）。

<!doctype html>
 <html>
  <head>
  </head>
  <body>

   <div id="block" onclick="myFunction()" style="height: 100px; width: 100px; background-color: blue"></div>

   <script>
   var myFunction = function() {
   document.getElementById("block").style.background-color = "green";
   </script>

  </body>
 </html>

Answer 1

两个问题：

background-color是无效的属性名称文字
您已将}从函数表达式的末尾移开

第二个很容易修复（只需在最后添加}，还可以添加;，因为它是表达式。）

重新开始：如果您打开浏览器的Web控制台（最好在开发时将其打开），您会看到指向

document.getElementById("block").style.background-color = "green";
// Here ------------------------------------------^

JavaScript属性名称文字不能包含-。为了解决这个问题，浏览器使用带有破折号的CSS名称的camelCased属性名称，在本例中为backgroundColor：

document.getElementById("block").style.backgroundColor = "green";

直播示例：

＆＃13;

var myFunction = function() {
   document.getElementById("block").style.backgroundColor = "green";
};

＆＃13;

<div id="block" onclick="myFunction()" style="height: 100px; width: 100px; background-color: blue"></div>

＆＃13;

您还可以使用括号表示法和字符串：

document.getElementById("block").style["background-color"] = "green";

直播示例：

＆＃13;

var myFunction = function() {
   document.getElementById("block").style["background-color"] = "green";
};

＆＃13;

<div id="block" onclick="myFunction()" style="height: 100px; width: 100px; background-color: blue"></div>

＆＃13;

Answer 2

background-color应为backgroundColor，JavaScript中的变量不得为-。而且，您有语法错误; }声明函数的结束。

＆＃13;

var myFunction = function() {
   document.getElementById("block").style.backgroundColor = "green";
}

＆＃13;

   <div id="block" onclick="myFunction()" style="height: 100px; width: 100px; background-color: blue"></div>

＆＃13;

什么阻止这个简单的HTML代码工作？

2 个答案: