.style在JS中不起作用

Question

我在html文件中创建了一个id =“game-display”的canvas元素。正在显示黄色边框，但我想要做的是使用JavaScript更改边框：

#game-display {
  border: 1px solid yellow;
}

<canvas id="game-display" width="800px" height="400px"></canvas>

所以在我设置的Js文件中：

var canvas = document.getElementById('game-display');
canvas.style.border = "1px solid red";

#game-display {
  border: 1px solid yellow;
}

<canvas id="game-display" width="800px" height="400px"></canvas>

但是当我运行我的网站时，边框保持黄色。所以我在控制台中输入了画布。它提出了正确的要素。但是当我输入canvas.style时，所有的字符串都没有定义，但这不是真的，因为显示了黄色边框）：就像.style不起作用。我在它的最后一个版本中使用谷歌浏览器

Answer 1

我假设这是发生的事情，因为你已经将脚本保留在画布之前，而不是等待DOM加载。您必须等待DOM加载或将您的脚本放在正文中。

否则style将是null。

#game-display {
  border: 1px solid yellow;
}

<script>
  window.onload = function() {
    var canvas = document.getElementById('game-display');
    canvas.style.border = "1px solid red";
  }
</script>
<canvas id="game-display" width="800px" height="400px"></canvas>