如何使用Javascript加载CSS文件？

2018-06-20 21:39:20

是否有可能使用Javascript将CSS样式表导入到HTML页面中？如果是这样，该怎么办？

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

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

VanillaJS

以下是一个使用普通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。

如果你使用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);
}
//]]>

链接地址: http://www.djcxy.com/p/58735.html

上一篇: How to load up CSS files using Javascript?

下一篇: Retrieving a List from a java.util.stream.Stream in Java 8