如何在原生JS中动态创建link标签引入CSS_操作DOM插入styleElement-css教程-PHP中文网

必须设 rel="stylesheet"，否则浏览器不加载css；需同时设置href指向有效路径，并插入document.head中防fouc；推荐添加onload/onerror监听，ie需轮询sheet.cssrules判断加载。

如何在原生js中动态创建link标签引入css_操作dom插入styleelement

用 `document.createElement('link')` 创建 link 标签必须设 `rel="stylesheet"`

不设 rel 或设错（比如 rel="style"、rel="css"），浏览器根本不会加载 CSS。这是最常被忽略的硬性要求。

实操建议：

link 元素必须同时设置 rel="stylesheet" 和 href（指向有效 CSS 路径）
推荐在 head 中插入，避免 FOUC（Flash of Unstyled Content）；若插到 body 后，部分浏览器可能延迟应用样式
可加 type="text/css"，但现代浏览器已非必需；若目标环境含老旧 IE（如 IE8），建议保留
插入前建议检查 href 是否 404：可用 fetch(href, { method: 'HEAD' }).catch(...) 预检（注意跨域限制）

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/assets/theme-dark.css';
link.type = 'text/css';
document.head.appendChild(link);

动态插入 `<style></style>` 标签时，内容必须写入 `textContent` 而非 `innerHTML`

用 innerHTML 写 CSS 规则会导致转义问题（如 {、} 被 HTML 解析器处理），且部分浏览器会忽略非法 HTML 内容后整段丢弃样式。

实操建议：

始终用 style.textContent = 'body { margin: 0; }'，不要用 style.innerHTML
若 CSS 字符串来自用户输入或模板，需手动转义单双引号和反斜杠（\、"、'），否则 JS 字符串解析会报错
大量规则建议拆成多条 style 标签，而非拼长字符串——便于后续 remove() 管理

const style = document.createElement('style');
style.textContent = `
  .highlight { background: #ffeb3b; }
  @media (prefers-color-scheme: dark) {
    body { background: #121212; }
  }
`;
document.head.appendChild(style);