window.onload函数引用失效：链接回黑功能在JS文件中无法生效

嘿，我来帮你搞定这个问题～你遇到的情况其实挺常见的，核心原因是外部JS文件加载执行时，页面里的DOM元素还没完全渲染出来，这时候document.getElementById("url")找不到目标元素，自然没法修改它的样式。

给你几个靠谱的解决方案，你可以根据需求选：

方案1：用window.onload包裹函数（和你内联的思路一致，移到外部JS） #

把你的函数放在window.onload回调里，这样代码会等整个页面（包括所有资源）加载完成后再执行，确保能找到目标元素：

// 你的外部JS文件（比如changeColor.js）
function changeColor() {
  document.getElementById("url").style.color = "#000000";
}

window.onload = function() {
  changeColor();
};

然后在HTML里正常引入这个外部JS就行，不用额外在body里手动调用changeColor()了。

方案2：把外部JS引用放在body最底部 #

这是更高效的做法，因为当浏览器执行到body底部的JS时，页面的DOM元素已经全部渲染完成了：

<!-- HTML结构 -->
<body>
  <!-- 页面所有内容，包括id为url的元素 -->
  <a id="url" href="#" style="color: purple;">点击过的链接</a>

  <!-- 把外部JS放在body最后 -->
  <script src="changeColor.js"></script>
</body>

外部JS里直接写逻辑就行，不用包裹任何事件：

// changeColor.js
document.getElementById("url").style.color = "#000000";

方案3：用DOMContentLoaded事件（推荐，比window.onload更快） #

这个事件会在DOM树构建完成后就触发，不用等图片、样式表这些外部资源加载完，执行时机更早：

// changeColor.js
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("url").style.color = "#000000";
});

同样，HTML里正常引入外部JS即可。

额外提醒：如果一定要手动调用函数 #

如果你坚持要在body里通过<script>调用changeColor()，那必须保证两个顺序：

1. 外部JS文件要在调用代码之前引入
2. 调用代码要在目标元素之后
   比如：

<body>
  <a id="url" href="#" style="color: purple;">点击过的链接</a>
  
  <!-- 先引入外部JS -->
  <script src="changeColor.js"></script>
  <!-- 再调用函数 -->
  <script>
    changeColor();
  </script>
</body>

内容的提问来源于stack exchange，提问作者Anna Klein