Question

所以我创建了一个全新的HTML文档，将我的H1类改为不同的颜色。有人可以告诉我为什么它不起作用？我没有说明，因为我确切地复制了如何更改颜色，我之前已经完成了但现在还没有工作。

<!DOCTYPE html>
<html>
<head>


<script>
var box = document.getElementById("box");
boxStyle = box.style;

boxStyle.color = 'red';
</script>

</head>

<body>

<h1 id="box">NBA Legends</h1>

</body>

</html>

Answer 1

如果您在<script>标记之后移动<h1>标记，则该标记将起作用：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1 id="box">NBA Legends</h1>
  <script>
    var box = document.getElementById("box");
    boxStyle = box.style;

    boxStyle.color = 'red';
  </script>
</body>
</html>

最佳做法是将<script>标记放在文档的末尾。这样HTML呈现然后JS执行。

Answer 2

这里有它的工作。 JS在执行html之前正在执行。

<!DOCTYPE html>
<html>
<head>

</head>

<body>

<h1 id="box1">NBA Legends</h1>

</body>
<script>
var box = document.getElementById("box1");
boxStyle = box.style;

boxStyle.color = 'red';
</script>
</html>

Answer 3

所以这就是我在单独的页面上使用JavaScript时所做的事情：（我确保源页面名称为yellow.js）

<!DOCTYPE html>
<html> 
<head>
<script src="yellow.js"></script>
</head>

<body>

<h1 id="box" onload="change()">NBA Legends</h1>

</body>

</html>

    function change() {
    var box = document.getElementById("box");
    boxStyle = box.style;

    boxStyle.color = 'red';
    }

为什么我的JavaScript没有样式化我的标题

3 个答案: