动态加载CSS文件

1、创建link标签加载CSS文件

javascript 复制代码
function loadCSS(cssFile) {
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = cssFile;
  document.head.appendChild(link);
}
// 异步加载CSS文件
loadCSS('path/to/your.css');

2、动态创建<style>标签,将CSS代码插入到文档中

javascript 复制代码
function loadCSSCode(cssCode) {
  var style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet) {
    // This is required for IE8 and below.
    style.styleSheet.cssText = cssCode;
  } else {
    style.appendChild(document.createTextNode(cssCode));
  }
  document.getElementsByTagName("head")[0].appendChild(style);
}
// 动态加载CSS代码
loadCSSCode('.classname { color: red; }');

3、利用import(vue中)

import('./path/to/your.css').then(css => css.default);

相关推荐
鹏北海1 分钟前
微信扫码登录 iframe 方案中的状态拦截陷阱
前端·javascript·vue.js
狗哥哥2 分钟前
Vite 插件实战 v2:让 keep-alive 的“组件名”自动长出来
前端·vue.js·架构
BD_Marathon3 分钟前
【JavaWeb】路径问题_前端相对路径问题
前端
AAA阿giao3 分钟前
代码宇宙的精密蓝图:深入探索 Vue 3 + Vite 项目的灵魂结构
前端·javascript·vue.js
徐同保6 分钟前
n8n创建凭据连接Google Sheets API
前端
houyhea13 分钟前
AI智能体浪潮下的前端演进:一场螺旋上升的轮回
前端·agent
LYFlied14 分钟前
【每日算法】LeetCode 146. LRU 缓存机制
前端·数据结构·算法·leetcode·缓存
半桶水专家16 分钟前
vue中的props详解
前端·javascript·vue.js
HIT_Weston20 分钟前
65、【Ubuntu】【Gitlab】拉出内网 Web 服务:Gitlab 配置审视(九)
前端·ubuntu·gitlab
b***748821 分钟前
前端的未来不是框架之争,而是数字体验能力的全面竞争
前端