如何使用 Javascript 加载 CSS 文件？

是否可以使用 Javascript 将 css 样式表导入 html 页面？如果是这样，怎么办？

PS javascript 将托管在我的网站上，但我希望用户能够放入他们网站的 <head> 标记，并且它应该能够将托管在我的服务器上的 css 文件导入当前网页。（css 文件和 javascript 文件都将托管在我的服务器上）。

原文由 Ali 发布，翻译遵循 CC BY-SA 2.5 许可协议

阅读 1k

这是“老派”的做法，希望它适用于所有浏览器。理论上，你会使用 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 路径是绝对路径，以便从您的服务器加载。

香草JS

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

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

原文由 user58777 发布，翻译遵循 CC BY-SA 4.0 许可协议

如何使用 Javascript 加载 CSS 文件？

香草JS

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

Stack Overflow 翻译