如何使用 javascript 加载 css 文件？

3个答案

在 JavaScript 中加载 CSS 文件，常用的方法包括：

使用 JavaScript 创建 <link> 标签并添加到 <head> 中

javascript
var head = document.head;
var link = document.createElement('link');

link.type = 'text/css';
link.rel = 'stylesheet';
link.href = 'path/to/your/cssfile.css';

head.appendChild(link);

使用 jQuery（如果你的项目中包含了 jQuery）

javascript
$('head').append('<link rel="stylesheet" type="text/css" href="path/to/your/cssfile.css">');

使用 import 语句在 JavaScript 模块中

如果你在使用支持模块的现代 JavaScript 中，可以使用 import 语法。

javascript
import './path/to/your/cssfile.css';

请注意，这通常需要构建工具（如 Webpack 或 Parcel）来处理 CSS 文件的导入。

使用 fetch API 动态获取 CSS 内容并插入

javascript
fetch('path/to/your/cssfile.css')
    .then(response => response.text())
    .then(css => {
        var style = document.createElement('style');
        style.textContent = css;
        document.head.appendChild(style);
    });

以上就是一些在 JavaScript 中加载 CSS 文件的方法。选择哪种方法取决于你的具体需求和项目的构建环境。

2024年6月29日 12:07 回复

我想这个脚本会做这样的事情：

shell
<script type="text/javascript" src="/js/styles.js"></script>

该JS文件包含以下语句：

shell
if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">');

如果 javascript 和 css 要引用您的网站，则它们的地址必须是绝对的。

这篇“用分支技术对 CSS 黑客说不”一文讨论了许多 CSS 导入技术。

但是“使用 JavaScript 动态添加 Portlet CSS 样式表”一文还提到了 CreateStyleSheet 的可能性（IE 的专有方法）：

shell
<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
  document.createStyleSheet('http://server/stylesheet.css');
}
else {
  var styles = "@import url(' http://server/stylesheet.css ');";
  var newSS=document.createElement('link');
  newSS.rel='stylesheet';
  newSS.href='data:text/css,'+escape(styles);
  document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>

2024年6月29日 12:07 回复

如果您想知道（或等待）样式本身加载，则可以执行以下操作：

shell
// this will work in IE 10, 11 and Safari/Chrome/Firefox/Edge
// add ES6 poly-fill for the Promise, if needed (or rewrite to use a callback)

let fetchStyle = function(url) {
  return new Promise((resolve, reject) => {
    let link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.onload = () => resolve();
    link.onerror = () => reject();
    link.href = url;

    let headScript = document.querySelector('script');
    headScript.parentNode.insertBefore(link, headScript);
  });
};

用法：

shell
fetchStyle(url)
 .then(
   () => console.log("style loaded succesfully"),
   () => console.error("style could not be loaded"),
);

2024年6月29日 12:07 回复

如何使用 javascript 加载 css 文件？

3个答案

你的答案