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

相关推荐
紫陌涵光3 分钟前
112. 路径总和
java·前端·算法
漠月瑾-西安13 分钟前
CVE-2025-55182漏洞解析:你的React项目安全吗?
前端·安全·react.js
No丶slovenly26 分钟前
flutter笔记-输入框
前端·笔记·flutter
国产化创客1 小时前
ESP32+Web实现智能气象站
前端·物联网·智能家居·智能硬件
coderYYY2 小时前
VSCode终端启动报错
前端·ide·vscode·npm·编辑器
tod1132 小时前
Redis 数据类型与 C++ 客户端实践指南(redis-plus-plus)
前端·c++·redis·bootstrap·html
Sylvia33.2 小时前
火星数据:棒球数据API
java·前端·人工智能
weixin199701080163 小时前
1688商品详情页前端性能优化实战
前端·性能优化
DEMO派3 小时前
前端常用XSS攻击演示与防御方案解析
前端·xss
问今域中3 小时前
Vue的computed用法解析
前端·javascript·vue.js