动态加载CSS文件

原创已于 2024-03-20 19:00:41 修改 · 636 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-03-20 18:59:59 首次发布

Web 同时被 2 个专栏收录

20 篇文章

订阅专栏

VueJS

19 篇文章

订阅专栏

本文介绍了三种在JavaScript中加载CSS文件的方法：使用link标签异步加载外部CSS，动态创建<style>标签插入内联CSS，以及在Vue中通过import导入并处理CSS。这些技巧有助于优化网页性能和开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、创建link标签加载CSS文件

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代码插入到文档中

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; }');