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

相关推荐
the局外人18 分钟前
掌控自己的 K 线数据:TradingView 本地部署与数据源接入
前端·vue.js·websocket
deli0071 小时前
配色对比度检查器:一眼看清文字和背景谁看不清
前端
梦诺1 小时前
vue3 keepAlive+记录滚动条
前端·javascript·vue.js
葡萄城技术团队1 小时前
SpreadJS V19.2 新特性揭秘:甘特表的进度线
前端
计算机魔术师1 小时前
黄仁勋台上接特朗普电话开免提,全场听到一句话:AI 不会减速
前端
yivifu2 小时前
HTML元素的textContent和innerText两个属性的差别
前端·html
咸鱼老弟2 小时前
Speculative Decoding(投机采样):大模型"先猜后验",生成速度翻倍
前端·算法·ai编程
a1117762 小时前
网页版「MATLAB」开源
前端·开源
JianZhen✓2 小时前
解决SPA发版旧版本残留+动态路由打包失效的完整方案(附落地代码)
前端·状态模式
计算机魔术师2 小时前
Dario Amodei 发文呼吁放缓前沿 AI 开发后各方表态汇总
前端