javascript - 这个javascript代码getElementById有什么问题？

Question

我在下面有这个代码..

<script>  document.getElementById('example').style.background-color =
'#FFCC00';    
</script>
<div id="example">This is an example.</div>

为什么它不起作用？

Answer 1

该脚本在具有给定 id 的元素存在之前运行，并且您有一个带有连字符的DOM 属性名称（它被视为减号运算符）。

<!-- Put the element first -->
<div id="example">This is an example.</div>
<script>
    // camelCase CSS property names when converting to DOM property names
    document.getElementById('example').style.backgroundColor = '#FFCC00';    
</script>

请参阅上述代码片段的实时示例。

您可以将 JS 语句包装在一个函数中，然后在元素存在后调用它，而不是将元素放在首位。您可以通过将其作为事件处理程序绑定到合适的东西（例如文档加载事件）来自动发生这种情况。

Answer 2

你应该写 backgroundColor

Answer 3

代码中需要更改的 2 件事。

1. 照原样，您的代码顺序错误。您需要先拥有 HTML，然后是 JS。按此顺序该元素尚不存在，JS 正在执行，DOM 对象尚不存在。

2. 没有“背景颜色”属性。而是使用“.backgroundColor”。破折号通常用驼色外壳代替。

这是一个工作示例：

<div id="example">This is an example.</div>

<script>
  document.getElementById('example').style.backgroundColor = '#FFCC00';
</script>

另一个提示：

如果要将订单作为依赖项删除，可以将 JavaScript 包装在“onload”事件处理程序中。

Answer 4

将 更改<script>为低于您的元素并使用backgroundColor

<div id="example">This is an example.</div>
<script>  
    document.getElementById('example').style.backgroundColor ='#FFCC00';    
</script>

Answer 5

更新：

<div id="example">This is an example.</div>
<script>document.getElementById('example').style.setProperty('background-color','#fco','important');</script>

,'重要'不是必需的