下面是一种“老派”的方法，希望它适用于所有浏览器。理论上，你可以使用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。

use:

document.getElementById("of head/body tag")
        .innerHTML += '<link rel="stylesheet" type="text/css" href="style.css">';

我知道这是一个相当老的帖子，但这里是我的5美分。

根据您的需要，还有另一种方法可以做到这一点。

我有一个情况下，我想要一个css文件是活跃的，只有一段时间。比如css切换。激活css，然后在另一个事件后取消激活它。

而不是动态加载css然后删除它，你可以在新css的所有元素前添加一个Class/ id，然后只需切换css的基本节点的Class/ id(如body标签)。

你会用这个解决方案有更多的css文件最初加载，但你有一个更动态的方式切换css布局。

下面是一种“老派”的方法，希望它适用于所有浏览器。理论上，你可以使用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导入断言建议

这个函数使用记忆。并且可以多次调用，而不会出现两次加载和运行相同样式表的冲突。而且，它不会在样式表实际加载之前解析。

const loadStyle = function () {
    let cache = {};
    return function (src) {
        return cache[src] || (cache[src] = new Promise((resolve, reject) => {
            let s = document.createElement('link');
            s.rel = 'stylesheet';
            s.href = src;
            s.onload = resolve;
            s.onerror = reject;
            document.head.append(s);
        }));
    }
}();

请注意函数表达式后面的括号()。

样式表的并行加载:

Promise.all([
    loadStyle('/style1.css'),
    loadStyle('/style2.css'),
    // ...
]).then(() => {
    // do something
})

您可以对动态加载脚本使用相同的方法。