动态加载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 分钟前
SimpleMindMap私有部署团队脑力风暴:cpolar内网穿透实验室第401个成功挑战
前端·程序员·远程工作
li理8 分钟前
鸿蒙 Next 布局开发实战:6 大核心布局组件全解析
前端
EndingCoder9 分钟前
React 19 与 Next.js:利用最新 React 功能
前端·javascript·后端·react.js·前端框架·全栈·next.js
li理11 分钟前
鸿蒙 Next 布局大师课:从像素级控制到多端适配的实战指南
前端
前端赵哈哈15 分钟前
Vite 图片压缩的 4 种有效方法
前端·vue.js·vite
Nicholas6822 分钟前
flutter滚动视图之ScrollView源码解析(五)
前端
电商API大数据接口开发Cris24 分钟前
Go 语言并发采集淘宝商品数据:利用 API 实现高性能抓取
前端·数据挖掘·api
风中凌乱的L29 分钟前
vue 一键打包上传
前端·javascript·vue.js
GHOME33 分钟前
Vue2与Vue3响应式原理对比
前端·vue.js·面试
张元清35 分钟前
useMergedRefs: 组件封装必不可少的自定义Hook
前端·javascript·面试