如何使用 javascript 加载 css 文件？

7 个月前提问

3 个月前修改

浏览次数109次

6个答案

在 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 回复

这是“老派”的做法，希望它适用于所有浏览器。理论上，您会setAttribute不幸地使用 IE6 并不始终支持它。

shell
var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.example/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

此示例检查 CSS 是否已添加，因此仅添加一次。

将该代码放入 JavaScript 文件中，让最终用户只需包含 JavaScript，并确保 CSS 路径是绝对路径，以便从服务器加载它。

香草JS

head下面是一个使用纯 JavaScript根据 URL 的文件名部分将 CSS 链接注入到元素中的示例：

shell
<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();

var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";

document.getElementsByTagName( "head" )[0].appendChild( link );
</script>

在结束标记之前插入代码head，CSS 将在页面呈现之前加载。使用外部 JavaScript ( ) 文件将导致出现无样式内容 ( FOUC.js )的 Flash 。

2024年6月29日 12:07 回复

如果你使用jquery：

shell
$('head').append('<link rel="stylesheet" type="text/css" href="style.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 回复

Element.insertAdjacentHTML具有很好的浏览器支持，并且可以在一行中添加样式表。

shell
document.getElementsByTagName('head')[0].insertAdjacentHTML(
    'beforeend',
    '<link rel="stylesheet" href="path/to/style.css" />');

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 文件？

6个答案

香草JS

你的答案