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

相关推荐
小小小小宇2 小时前
Pi 手动添加
前端
然我2 小时前
模型不是 Agent:从零实现一个最小 Agent Loop
前端·人工智能·agent
boooooooom2 小时前
手把手做一个图 RAG 烹饪问答系统:Neo4j + Milvus + LLM 的工程实践
前端·javascript·后端
小小善后师2 小时前
HID 设备对接技术解析:基于本地中间服务的 WebSocket 通信模式
前端
黄油面包2 小时前
Codex 额度三天见底后,我重新做了一周预算
前端·人工智能
PedroQue992 小时前
v2.7.1:修复 H5 端返回死循环闪烁问题
前端·uni-app
coderCN2 小时前
Nodejs express+knex(ORM框架)
前端·node.js
求道於盲2 小时前
python中的抽象类
前端
Csvn3 小时前
CSS 层叠与现代布局:BFC、@layer 与 grid/flex 的取舍
前端
CodeSheep3 小时前
OpenJDK 全面禁止 AI 生成代码!
前端·后端·程序员