我想分享一种方法，不仅加载css，但所有的资产(js, css，图像)和处理onload事件的一堆文件。async-assets-loader。请看下面的例子:

<script src="https://unpkg.com/async-assets-loader"></script>
<script>
var jsfile = "https://code.jquery.com/jquery-3.4.1.min.js";
var cssfile = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
var imgfile = "https://logos.keycdn.com/keycdn-logo-black.png";
var assetsLoader = new asyncAssetsLoader();
assetsLoader.load([
      {uri: jsfile, type: "script"},
      {uri: cssfile, type: "style"},
      {uri: imgfile, type: "img"}
    ], function () {
      console.log("Assets are loaded");
      console.log("Img width: " + assetsLoader.getLoadedTags()[imgfile].width);
    });
</script> 

根据async-assets-loader文档

下面是一种“老派”的方法，希望它适用于所有浏览器。理论上，你可以使用setAttribute不幸的是，IE6并不一贯支持它。

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路径是绝对的，以便从服务器加载它。

VanillaJS

下面是一个例子，使用纯JavaScript注入一个CSS链接到head元素基于URL的文件名部分:

<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>

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

来自未来的回答。 在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导入断言建议

我想类似这样的脚本可以做到:

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

这个JS文件包含以下语句:

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

javascript和css的地址需要是绝对的，如果他们是指你的网站。

在这篇“用分支技术向CSS黑客说不”的文章中讨论了许多CSS导入技术。

但是“使用JavaScript动态添加Portlet CSS样式表”这篇文章也提到了CreateStyleSheet的可能性(IE的专有方法):

<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);
}
//]]>

你听说过《承诺》吗?它们适用于所有现代浏览器，而且使用起来相对简单。看看这个简单的方法，将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

var elem = document.createElement('link');
elem.rel = ' stylesheet'
elem.href= 'style.css';//Link of the css file
document.head.appendChild(elem);