当前位置:   article > 正文

动态加载CSS文件

动态加载CSS文件

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

  1. function loadCSS(cssFile) {
  2. var link = document.createElement("link");
  3. link.rel = "stylesheet";
  4. link.type = "text/css";
  5. link.href = cssFile;
  6. document.head.appendChild(link);
  7. }
  8. // 异步加载CSS文件
  9. loadCSS('path/to/your.css');

2、动态创建<style>标签,将CSS代码插入到文档中

  1. function loadCSSCode(cssCode) {
  2. var style = document.createElement('style');
  3. style.type = 'text/css';
  4. if (style.styleSheet) {
  5. // This is required for IE8 and below.
  6. style.styleSheet.cssText = cssCode;
  7. } else {
  8. style.appendChild(document.createTextNode(cssCode));
  9. }
  10. document.getElementsByTagName("head")[0].appendChild(style);
  11. }
  12. // 动态加载CSS代码
  13. loadCSSCode('.classname { color: red; }');

3、利用import(vue中)

 import('./path/to/your.css').then(css => css.default);

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/322433
推荐阅读
相关标签
  

闽ICP备14008679号