Question

当我将脚本插入head或body元素时，我试图让我的JavaScript工作。

以下是我的例子：

首先我将其插入body this example（工作）：

＆＃13;

    <html>
    <body>
    
    <p id="p2">Hello World!</p>
    
    <script>
    document.getElementById("p2").style.color = "blue";
    </script>
    
    <p>The paragraph above was changed by a script.</p>
    
    </body>
    </html>

＆＃13;

当我将script移到body（也在工作）的末尾时：

＆＃13;

<html>
<body>

<p id="p2">Hello World!</p>

<p>The paragraph above was changed by a script.</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>

＆＃13;

但当我将其移至head时，停止工作：

＆＃13;

	<html>
	<head>
		<script>
		document.getElementById("p2").style.color = "blue";
		</script>
	</head>
	<body>

	<p id="p2">Hello World!</p>

	<p>The paragraph above was changed by a script.</p>

	</body>
	</html>

＆＃13;

Answer 1

使用关键字defer：

延期说明：

直到页面加载后才会运行的脚本。

＆＃13;

    <html>
    <body>
    
    <p id="p2">Hello World!</p>
    
    <script defer>
    document.getElementById("p2").style.color = "blue";
    </script>
    
    <p>The paragraph above was changed by a script.</p>
    
    </body>
    </html>

＆＃13;

Answer 2

问题是你的脚本在头部，p2还没有定义

所以你在document.ready编写脚本，因为script在文档加载后运行

对于运行jquery代码，您需要为此

添加jquery库

link：jquery library

或在

中编写代码

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <script>
    $(document).ready(function() {
      document.getElementById("p2").style.color = "blue";
    });
  </script>
</head>

<body>

  <p id="p2">Hello World!</p>

  <p>The paragraph above was changed by a script.</p>

</body>

</html>

＆＃13;

Answer 3

您可以使用int，这意味着只有在加载HTML页面后才会调用它。这是您研究的快速reference。谢谢！

Answer 4

这是因为你在头部调用p2并且当时没有定义它。编译器不知道p2在哪里显示未定义的原因。

其中一个解决方案就是如下所示：

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

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

Answer 5

＆＃34;当我在脚本中插入脚本时为什么它不起作用？＆＃34;

这是因为脚本在DOM对象存在之前尝试访问它。这是jQuery用户倾向于使用$(document).ready();包围函数的主要原因之一。

较早的做法是始终将您的脚本加载到HTML文档的正文下方，但是it came with it's own problems。

如果您希望脚本仅在加载文档后执行，则使用<script defer> /* your code here */ </script>是一种普遍接受的方法。 Alternatively, you can use an external library like jQuery and use：

$(document).ready(function(){
    //your code here
});

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

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

这不是必要的，只是一个有趣的选择

Answer 6

当您的脚本代码位于head标记中时，它会被执行，但DOM元素尚未就绪。所以，没有变化。对于此类情况，请始终使用body.onload，因为您的脚本将在正文中的元素准备就绪后执行。

奖励：如果您将脚本放在<body>标记上方的<p>内，该脚本也无效。

JavaScript-当我的脚本在头部时不能改变样式

6 个答案: