Question

所以这就是我在单独的页面上使用JavaScript时所做的：为什么它不起作用?????（我确定源页面名称是yellow.js而我只是不知道如何在这里分离javascript文件）

<!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';
}

Answer 1

首先将您的javascript代码放入正文。如果您想在页面加载时更改颜色，可以使用window.onload = change()事件。在您使用它之前，您的boxStyle变量并不是非定义的。我做了一些更改。

<body>
  <h1 id="box">NBA legends</h1>
  <script type="text/javascript">
   function change() {
    var box = document.getElementById("box");
    var boxStyle = box.style;
    boxStyle.color = 'red';
  }
 window.onload = change();
 </script> 
</body>

Answer 2

window.onload = function change()
{
	
	var box = document.getElementById("box");
	var boxStyle = box.style;

	boxStyle.color = 'red';
}

<!DOCTYPE html>
<html> 
<head>
<script src="yellow.js"></script>
</head>

<body>

<h1 id="box" onload="change()">NBA Legends</h1>

</body>

</html>

这是两者之间的区别

window.onload - 在所有DOM，JS文件，图片，iframe，Extensions等完全加载后调用它。这等于$（window）.load（function（）{}）;

onload =“” - 一旦DOM加载就会调用它。这等于$（document）.ready（function（）{}）;

编写干净的代码总是好的，我总是喜欢使用window.onload，而不是在元素上使用onload事件。

为什么我在单独的.JS页面上设置的ID类不起作用

2 个答案: