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

相关推荐
jingling55511 分钟前
css进阶 | 实现罐子中的水流搅拌效果
前端·css
悟能不能悟2 小时前
前端上载文件时,上载多个文件,但是一个一个调用接口,怎么实现
前端
可问春风_ren2 小时前
前端文件上传详细解析
前端·ecmascript·reactjs·js
羊小猪~~3 小时前
【QT】--文件操作
前端·数据库·c++·后端·qt·qt6.3
晚风资源组4 小时前
CSS文字和图片在容器内垂直居中的简单方法
前端·css·css3
Miketutu4 小时前
Flutter学习 - 组件通信与网络请求Dio
开发语言·前端·javascript
幻影星空VR元宇宙5 小时前
5D影院带来的视觉震撼与娱乐投资价值分析以及球幕影院设备价格揭秘
css·百慕大冒险·幻影星空
光影少年6 小时前
前端如何调用gpu渲染,提升gpu渲染
前端·aigc·web·ai编程
Surplusx6 小时前
运用VS Code前端开发工具完成网页头部导航栏
前端·html
小宇的天下7 小时前
Calibre 3Dstack --每日一个命令day13【enclosure】(3-13)
服务器·前端·数据库