这是做这件事的“老派”方式，希望它适用于所有浏览器。理论上，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.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

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

将该代码放入 javascript 文件中，让最终用户简单地包含 javascript，并确保 CSS 路径是绝对路径，以便从您的服务器加载。

香草JS

这是一个使用纯 JavaScripthead根据 URL 的文件名部分将 CSS 链接注入元素的示例：

<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 ( .js) 文件将导致出现无样式内容 ( FOUC )的 Flash 。

如果您使用 jquery：

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

我想这样的脚本会做：

<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 hacks 说不”文章中讨论了许多 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);
}
//]]>

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

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

如果您想知道（或等待）样式本身已加载，则此方法有效：

// 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 = function() { resolve(); console.log('style has loaded'); };
    link.href = url;

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