通过创建link标签并插入head可动态加载CSS，优化首屏加载；2. 设置rel为stylesheet、href为目标路径，并监听onload事件确保加载完成；3. 调用loadCSS函数时检查是否已存在相同href的link，避免重复加载；4. 该方法兼容性好，适用于大多数浏览器。
通过 JavaScript 动态加载 CSS 文件，是一种在页面运行时按需引入样式资源的常用方式。这种方法有助于优化首屏加载速度，减少初始资源体积。
创建 link 标签插入 DOM
最直接的方式是通过操作 DOM，动态创建一个 link 元素，并将其添加到页面的 head 中。
具体步骤如下：
创建 link 元素 设置 rel 属性为 stylesheet 设置 href 属性为目标 CSS 文件路径 将 link 插入到 document.head
示例代码：
立即学习“Java免费学习笔记（深入）”；
静静设计网站后台管理界面模板
这是一款用于静静设计网站后台管理界面模板，也可以用于管理系统或其它通用后台界面。这款后台模板的宗旨是，页面基本没有过多的交互效果，简洁粗暴的同时带来的是界面加载速度的提升或操作便捷性的增加。2个css文件不超过20k，图标采用的是字体图标，图标素材都来自于icomoon网站，没有任何图片。页面整体采用扁平化处理，布局更趋向于暴露内容的本质，页面块之间的留白更多，字体更大，配色更单一，在form表单
403 查看详情
function loadCSS(url) { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = url; document.head.appendChild(link);}// 调用loadCSS('/path/to/style.css');
确保加载完成后再执行后续逻辑
有时需要在 CSS 加载完成后执行某些操作（例如显示依赖该样式的元素），可以通过监听 link 的 onload 事件实现。
示例：
function loadCSS(url, callback) { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = url; if (callback) { link.onload = () => callback(null); link.onerror = () => callback(new Error(`Failed to load CSS: ${url}`)); } document.head.appendChild(link);}loadCSS('/path/to/theme.css', (err) => { if (err) { console.error(err); } else { console.log('CSS loaded successfully'); }});
避免重复加载
多次调用加载函数可能导致重复插入相同的 CSS 文件。可以通过检查已存在的 link 标签来避免这个问题。
改进后的版本：
function loadCSS(url, callback) { // 检查是否已加载 if (document.querySelector(`link[href="${url}"]`)) { if (callback) callback(null); return; } const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = url; link.onload = () => callback?.(null); link.onerror = () => callback?.(new Error(`Failed to load CSS: ${url}`)); document.head.appendChild(link);}
基本上就这些。这种方式简单、兼容性好，适用于大多数现代浏览器和旧版浏览器。
以上就是如何通过javascript动态加载css文件的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1016543.html
微信扫一扫 
支付宝扫一扫 
