为什么我的JavaScript没有设置标题的样式_Javascript_Css_Dom_Styles

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

javascript css dom

为什么我的JavaScript没有设置标题的样式,javascript,css,dom,styles,Javascript,Css,Dom,Styles,因此，我甚至创建了一个全新的HTML文档，将我的H1类更改为不同的颜色。有人能告诉我为什么它不工作吗？我不理解，因为我确实复制了如何改变颜色，我以前也做过，但现在不行了 <!DOCTYPE html> <html> <head> <script> var box = document.getElementById("box"); boxStyle = box.style; boxStyle.color = 'red'; </script

因此，我甚至创建了一个全新的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>


var-box=document.getElementById（“box”）；
boxStyle=box.style；
boxStyle.color='red'；
NBA传奇人物

如果将

标记移动到

标记之后，它将工作：

<!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>


NBA传奇人物
var-box=document.getElementById（“box”）；
boxStyle=box.style；
boxStyle.color='red'；

最好将

标记放在文档末尾。通过这种方式，HTML呈现，然后JS执行。

这里就是它的工作方式。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>


NBA传奇人物
var-box=document.getElementById（“box1”）；
boxStyle=box.style；
boxStyle.color='red'；

这就是我在使用JavaScript时所做的，将JavaScript放在一个单独的页面上：（我确保源页面名为yellow.js）


NBA传奇人物
函数更改（）{
var-box=document.getElementById（“box”）；
boxStyle=box.style；
boxStyle.color='red'；
}

尝试在标记后添加脚本标记。javascript是在h1得到呈现的机会之前执行的。感谢这一点，但是当我将其应用到附加到html文档的脚本页面时，它不起作用@Andreicacio请发布另一个问题和代码片段，我们将看一看。干杯您需要在页面加载后执行此代码，可能是由于主体的onload事件。如果使用jQuery，可以执行

$（document）.ready（函数（）{yourcodehere}）还有一个提示：使用insead类，这样当您需要修改样式时就不需要重写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';
    }