YUI库可能就是您正在寻找的。它还支持跨域加载。

如果你使用jquery，这个插件做同样的事情。

元素。insertAdjacentHTML有很好的浏览器支持，可以在一行中添加一个样式表。

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

有一个通用的jquery插件，可以按需加载css和JS文件的同步和异步。 它还可以跟踪已经加载的内容:) 参见:http://code.google.com/p/rloader/

来自未来的回答。 在2022年，我们有导入断言api用于导入css文件。

import mycss from "./style/mycss.css" assert { type: "css" };
    document.adoptedStyleSheets = [sheet];
    shadowRoot.adoptedStyleSheets = [sheet];

浏览器支持: 截至2022年9月，仅支持基于铬的浏览器。

更多信息请访问: V8导入断言post

tc39 github T39导入断言建议

你听说过《承诺》吗?它们适用于所有现代浏览器，而且使用起来相对简单。看看这个简单的方法，将css注入到html头部:

function loadStyle(src) {
    return new Promise(function (resolve, reject) {
        let link = document.createElement('link');
        link.href = src;
        link.rel = 'stylesheet';

        link.onload = () => resolve(link);
        link.onerror = () => reject(new Error(`Style load error for ${src}`));

        document.head.append(link);
    });
}

你可以这样实现它:

window.onload = function () {
    loadStyle("https://fonts.googleapis.com/css2?family=Raleway&display=swap")
        .then(() => loadStyle("css/style.css"))
        .then(() => loadStyle("css/icomoon.css"))
        .then(() => {
            alert('All styles are loaded!');
        }).catch(err => alert(err));
}

这真的很酷，对吧?这是一种使用Promises来决定样式优先级的方法。

要查看多风格加载实现，请参见:https://stackoverflow.com/a/63936671/13720928

如果你使用jquery:

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');