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

相关推荐
七月丶几秒前
实战复盘:我为什么把 TypeScript 写的 CLI 工具用 Rust 重写了一遍?
前端·后端·rust
over6973 分钟前
《闭包、RAG与AI面试官:一个前端程序员的奇幻LangChain之旅》
前端·面试·langchain
JIngJaneIL8 分钟前
基于java+ vue交友系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·交友
拉不动的猪18 分钟前
回顾计算属性的缓存与监听的触发返回结果
前端·javascript·vue.js
karshey42 分钟前
【IOS webview】h5页面播放视频时,IOS系统显示设置的icon
前端·ios
树欲静而风不止慢一点吧42 分钟前
小米手环9应用/游戏开发快速入门
前端·javascript·小程序
小七不懂前端1 小时前
我用 NestJS + Vue3 + Prisma + PostgreSQL 打造了一个企业级 sass 多租户平台
前端·vue.js·后端
晚星star1 小时前
2.2 Node的模块实现
前端·node.js
zYear1 小时前
Three.js 入门指南:揭开 3D 网页的魔法面纱
前端
Crystal3281 小时前
图片懒加载
前端·javascript·代码规范