动态加载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);

相关推荐
原则猫2 分钟前
await 到底在等待什么
前端
西洼工作室12 分钟前
fetch+ReadableStream实现SSE推送实时踢人下线
前端·python·全栈
农夫山泉不太甜17 分钟前
Nuxt 4 完全指南:从入门到精通
前端
Momo__19 分钟前
Vue 3.4+ 被低估的 3 个 API,让你的代码更优雅
前端·vue.js
dishugj23 分钟前
HANA数据库常用命令总结
java·前端·数据库
clove26 分钟前
JavaScript 提升(Hoisting)与声明优先级:一篇文章说透
前端
七牛开发者30 分钟前
不写框架、不用 npm,我用 AI Coding 做了一个家庭记忆站
前端·人工智能·npm
@PHARAOH34 分钟前
WHAT - npm和corepack
前端·npm·node.js
不爱学英文的码字机器34 分钟前
被 AE 的关键帧折磨过的人,应该试试这个用 React 写视频的路子
前端·react.js·音视频