JavaScript-当我的脚本在头部时无法更改样式

当我将脚本插入

head

或

body

元素时，我正试图让JavaScript正常工作

以下是我的例子：

---

首先，我将其插入

主体

中，如（工作）：

你好，世界
document.getElementById（“p2”）.style.color=“蓝色”；
上面的段落被一个脚本修改了

使用关键字：

延期说明：

在加载页面之前不会运行的脚本

你好，世界
document.getElementById（“p2”）.style.color=“蓝色”；
上面的段落被一个脚本修改了

这是因为您在头上调用p2，而此时它还没有定义。编译器不知道p2在哪里，这就是为什么它显示为未定义

其中一个解决方案是按如下方式进行：

window.onload = function () { 
   document.getElementById("p2").style.color = "blue";
}

---

上述脚本将在页面完全加载时运行

问题是您的脚本在head中，

p2

尚未定义

所以您可以在

document.ready

中编写脚本，因为

script

在加载文档后运行

要运行jquery代码，您需要为此添加

jquery

库

链接：

或者用

window.onload = function() {
  document.getElementById("p2").style.color = "blue";
};

$（文档）.ready（函数（）{
document.getElementById（“p2”）.style.color=“蓝色”；
});
你好，世界
上面的段落被一个脚本修改了

您可以使用

window.onload

，这意味着它只有在加载HTML页面后才会调用。这是你学习的捷径。谢谢大家!

“为什么在头部插入脚本时它不起作用？”

这是因为脚本试图在DOM对象存在之前访问它。这是jQuery用户倾向于使用

$（document）.ready（）的主要原因之一围绕这些函数进行包装

然而，一种较旧的做法是始终将脚本加载到HTML文档的主体下方

如果希望脚本仅在加载文档后执行，则在此处使用
/*您的代码*/
是公认的方法：

如果您决定使用jQuery，还可以将当前脚本（
document.getElementById（“p2”）.style.color=“blue”
）替换为：

这不是必要的，只是一个有趣的选择，考虑
当你的脚本代码在头标签中时，它被执行，但是DOM元素还没有准备好。因此，没有发生变化。对于这种情况，请始终使用
body.onload
，因为这样，脚本将在body中的元素就绪后执行。

额外好处：如果将脚本放在
标记上方的
中，脚本也不会工作。
请确保在页面准备就绪后执行脚本。这确实可以解决问题，但是您需要一个jQuery库来解决这个问题。我想如果你也解释一下，你的答案会更好。
$(document).ready(function(){
    //your code here
});

$(document).ready(function(){
    $('#p2').css({'color':'blue'});
});