如何使用JavaScript在title标签之前引入外部CSS样式文件

原有代码问题排查 #

你之前的代码无法生效是存在3个核心错误：

• 你调用document.getElementById('title')但你的<title>标签没有设置id="title"属性，该方法无法匹配到对应DOM节点
• document.title是页面标题的字符串属性，不是DOM元素对象，不存在DOM操作相关方法
• insertBefore是父节点的方法，正确调用格式为父节点.insertBefore(待插入节点, 参照节点)，你的调用对象和语法都不正确

正确实现代码 #

直接使用以下代码即可完成在title标签前插入CSS文件的需求：

// 选中title标签DOM节点
const titleEl = document.querySelector('title');
// 创建link标签并设置属性
const customCss = document.createElement('link');
customCss.rel = 'stylesheet';
customCss.type = 'text/css';
customCss.href = 'modules/Treat/css/app.css';
// 插入到title标签之前
titleEl.parentNode.insertBefore(customCss, titleEl);

注意事项 #

如果你的JS代码放在<head>标签内执行，需要包裹DOM加载完成监听事件，避免代码执行时title节点还未渲染导致报错：

document.addEventListener('DOMContentLoaded', () => {
  const titleEl = document.querySelector('title');
  const customCss = document.createElement('link');
  customCss.rel = 'stylesheet';
  customCss.type = 'text/css';
  customCss.href = 'modules/Treat/css/app.css';
  titleEl.parentNode.insertBefore(customCss, titleEl);
});

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