Question

我需要使用for in

为每个div分配一个颜色的数组颜色

var colors = ["#232323","#343434","#555555","#989889","#987898","#458676"]

var squares=document.querySelectorAll(".square")

for (i=0; i<squares.length; i++){
  squares[i].style.background=colors[i]
}

body {
  background: black;
}

.square {
  float : left;
  height: 30%;
  width:30%;
  background-color: red;
  margin : 1%;
}

.container {
  max-width: 600p1%

<iDOCTYPE>
<html>
<head>
  <title>Proyecto Color Game</title>
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
  <link rel="stylesheet" href="stylesheet.css">

</head>
<body>
  <div class="container" align="center">

      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
</div>


<script src="Javascript.js" ></script>
</body>
</html>

Answer 1

使用devtools查看您的HTML和样式。例如，如果你打开＆＃34; Elements＆＃34;选项卡，然后单击.container，然后在右侧的检查器窗格中选择＆＃34; Computed＆＃34;，您将看到以下内容：

高度为零。那是因为你没有给div任何会导致它有任何非零高度的内容。要对此进行测试，只需添加元素样式，例如height: 500px：

你会看到你的结果：

样式检查器还会向您显示max-width属性中的错误（请参阅黄色三角形），因此您也应该修复它。

故事的道德：Chrome为调试代码提供了很好的工具 - CSS，HTML和JS。学习并使用它们。在Hidden Figures中的女主角通过阅读手册学习FORTRAN五十年后，阅读文档仍然是学习新工具的最佳方式。 Devtools的样式检查员excellent documentation。阅读它。

您的原始错误消息

Javascript.js：6 Uncaught TypeError：无法设置属性＆＃39; background＆＃39;未定义的

我对此错误消息感到困惑。这意味着某些DOM元素上不存在style属性，永远不应该这样。还有其他事情必须继续。

Answer 2

您的代码似乎是正确的，但由于您的div是空的，因此您无法获得所需的结果。尝试在每个中添加一些内容，例如 并尝试。 Here's向你展示我的意思。

Answer 3

您的代码出现了一些错误。

我已完成此代码段。

您的代码更改：

我已经为div设置了100x100px，所以你的div有一些大小，你可以看到颜色。您还可以向div添加内容，以便它们具有一定的大小。
你在.container class
我在.container类

var colors = ["#232323","#343434","#555555","#989889","#987898","#458676"]

var squares=document.querySelectorAll(".square")

for (i=0; i<squares.length; i++){
  squares[i].style.background=colors[i];
}

body {
  background: black;
}

.square {
  float : left;
  height: 100px;
  width: 100px;
  background-color: red;
  margin : 1%;
}

.container {
  max-width: 600px;
}

<html>
<head>
  <title>Proyecto Color Game</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <div class="container" align="center">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</body>
</html>

Javascript.js：6 Uncaught TypeError：无法设置undefined的属性'background'

3 个答案:

您的原始错误消息