HTML如何使用 Javascript 加载 CSS 文件？

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

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

分割线

网友回答：

这是“老派”的解决方法，希望适用于所有浏览器。从理论上讲，不幸的是，IE6 并不始终支持它。setAttribute

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

香草简斯

下面是一个使用纯 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>

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

分割线

网友回答：

如果你使用 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 黑客说不”一文中讨论了许多 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);
}
//]]>

模板简介：该模板名称为【 HTML如何使用 Javascript 加载 CSS 文件？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。