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

相关推荐
ヤ鬧鬧o.39 分钟前
多彩背景切换演示
前端·css·html·html5
lethelyh1 小时前
Vue day1
前端·javascript·vue.js
酉鬼女又兒1 小时前
SQL113+114 更新记录(一)(二)+更新数据知识总结
java·服务器·前端
无风听海1 小时前
AngularJS中 then catch finally 的语义、执行规则与推荐写法
前端·javascript·angular.js
利刃大大1 小时前
【Vue】组件化 && 组件的注册 && App.vue
前端·javascript·vue.js
一起养小猫1 小时前
Flutter for OpenHarmony 实战:按钮类 Widget 完全指南
前端·javascript·flutter
css趣多多1 小时前
Vux store实例的模块化管理
前端
我是伪码农2 小时前
Vue 1.26
前端·javascript·vue.js
晚霞的不甘3 小时前
Flutter for OpenHarmony 创意实战:打造一款炫酷的“太空舱”倒计时应用
开发语言·前端·flutter·正则表达式·前端框架·postman
这儿有一堆花3 小时前
CSS 拟真光影设计:从扁平到深度的技术复盘
前端·css