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

相关推荐
Mintopia7 分钟前
别再迷信“最佳实践”:适合你项目的才是对的
前端·架构
console.log('npc')8 分钟前
react弹窗组件
前端·javascript·react.js
LlNingyu15 分钟前
文艺复兴,什么是CSRF,常见形式(二)--SameSite属性
前端·网络·安全·web安全·csrf
紫_龙18 分钟前
最新版vue3+TypeScript开发入门到实战教程之组件通信之一
前端·vue.js·typescript
yivifu23 分钟前
接近完美的HTML文本双行合一排版
前端·javascript·html·双行合一
fxshy24 分钟前
前端直连模型 vs 完整 MCP:大模型驱动地图的原理与实践(技术栈Vue + Cesium + Node.js + WebSocket + MCP)
前端·vue.js·node.js·cesium·mcp
鹏程十八少26 分钟前
10. Android Shadow是如何实现像tinker热修复动态修复so(源码解析)
android·前端·面试
destinying29 分钟前
性能优化之项目实战:从构建到部署的完整优化方案
前端·javascript·vue.js
我命由我1234533 分钟前
React - React Redux 数据共享、Redux DevTools、React Redux 最终优化
前端·javascript·react.js·前端框架·ecmascript·html5·js
Jinuss34 分钟前
源码分析之React中的createContext/useContext详解
前端·javascript·react.js