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

相关推荐
M ? A1 分钟前
Vue Suspense 组件在 React 中,VuReact 会如何实现?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
天才熊猫君5 分钟前
通用 Loading 状态管理器
前端·javascript·vue.js
胡志辉7 分钟前
网络七层到底怎么落到一次前端请求上:从浏览器到网卡,再到远端服务器
前端·网络协议
怪兽同学9 分钟前
统一管理Agent Skills
前端·agent
陆枫Larry13 分钟前
微信小程序订阅消息完全指南:从原理到落地的全流程梳理
前端
Camellia-lon28 分钟前
jQuery购物车实现:从入门到精通
前端·javascript·jquery
Mintopia31 分钟前
一套能落地的"模块拆分"方法:不靠经验也能做对
前端
禅思院33 分钟前
从术到道:构建企业级异步组件加载方案的设计哲学与实现精要
前端·vue.js·架构
哈罗哈皮34 分钟前
玩转OpenLayers主题色修改,打造独一无二的个性化地图
前端
yuanpan40 分钟前
Python 开发一个简单演示网站:用 Flask 把脚本能力扩展成 Web 应用
前端·python·flask