JS中canvas.style.border设置不生效问题咨询

咱们先排查最常见的核心问题——JavaScript代码的执行时机：

你当前的JS代码如果是放在<head>标签里，或者写在<canvas>元素之前的话，浏览器还没渲染到这个canvas元素，document.getElementById('game-display')会返回null，自然没法修改它的样式。

解决方案1：把JS代码放到页面底部 #

直接把你的JS代码移动到</body>标签的前面，这样能确保DOM已经完全加载完成：

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

解决方案2：监听DOM加载完成事件 #

如果不想调整代码位置，可以通过DOMContentLoaded事件，确保DOM加载完成后再执行修改样式的逻辑：

document.addEventListener('DOMContentLoaded', function() {
  var canvas = document.getElementById('game-display');
  canvas.style.border = "1px solid red";
});

额外排查点 #

如果上面的方法都没生效，检查一下你的CSS代码里有没有给border属性加!important（虽然你当前的代码里没有，但万一后续修改时添加了）：

/* 这种情况会强制覆盖行内样式，导致JS修改失效 */
#game-display { border: 1px solid yellow !important; }

如果确实存在!important，要么直接去掉它（更推荐），要么在JS里通过cssText来强制覆盖：

canvas.style.cssText = "border: 1px solid red !important;";

内容的提问来源于stack exchange，提问作者sorH