.style 在 JS 中不起作用答案

【问题标题】：.style is not working in JS.style 在 JS 中不起作用
【发布时间】：2018-09-30 10:43:15
【问题描述】：

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

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

&lt;canvas id="game-display" width="800px" height="400px"&gt;&lt;/canvas&gt;

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

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

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

&lt;canvas id="game-display" width="800px" height="400px"&gt;&lt;/canvas&gt;

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

【问题讨论】：

我编辑了你的问题，所以你发布的示例代码在 sn-p 中运行，它似乎工作正常
您的 javascript 是如何添加到您的页面的？ @sorH
第二个@j08691——似乎在sn-p中工作正常。我的猜测是您的 JS 在 <canvas> 元素实际上在 DOM 中之前执行/评估... OR 根本不评估。
至于为什么style对象上没有出现边框样式，它们不应该出现。元素的style 对象仅显示在元素上直接设置的样式，而不显示CSS 样式表规则所隐含的样式。

标签： javascript html css canvas

【解决方案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>

【讨论】：

其实我的脚本标签就在正文结束标签之前