CSS动态加载技术_使用JavaScript在运行时插入样式表

苏承栈

2026-10-26 • 👁 0人浏览过

动态插入标签是真正加载CSS的正确方式，需用createElement创建并设rel="stylesheet"后挂载到head，监听load/error事件；document.styleSheets仅为只读集合，不能用于添加样式。动态插入

标签加载外部 CSS 这是最接近“真正加载 CSS 文件”的方式，浏览器会发起网络请求、解析并应用样式，支持

@import

、字体、媒体查询等完整功能。常见错误是直接用

innerHTML

插入

：它不会触发加载，且可能被浏览器忽略。必须用 DOM 方法创建并挂载。用

document.createElement('link')

创建节点，设置

rel="stylesheet"

和

href

务必在插入前设置好

rel

，否则 Chrome/Firefox 会跳过加载插入到

document.head

，不要插到

body

或未挂载的 fragment 中需要监听

load

和

error

事件做容错，

onload

在 Safari 中不可靠，优先用

addEventListener

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/styles/theme-dark.css';
link.addEventListener('load', () => console.log('CSS loaded'));
link.addEventListener('error', () => console.error('Failed to load CSS'));
document.head.appendChild(link);

document.styleSheets

与动态创建