如何使用Javascript加载CSS文件？
是否有可能导入CSS使用JavaScript的HTML页面样式表？ 如果是这样，怎么办？
PS的JavaScript将被托pipe在我的网站上，但我希望用户能够在他们的网站的<head>标记，它应该能够导入我的服务器上托pipe的CSS文件到当前的网页。 （css文件和JavaScript文件都将托pipe在我的服务器上）。
这是“老派”的做法，希望可以在所有浏览器上使用。 理论上，你会使用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，并确保CSSpath是绝对的，所以它从你的服务器加载。
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>
在closureshead标签之前插入代码，并在呈现页面之前加载CSS。 使用外部JavaScript（ .js ）文件将导致出现一个未格式化内容（ FOUC ）的Flash。
我猜这样的脚本会做：
<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黑客说”文章中讨论。
但是“使用JavaScriptdynamic添加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); } //]]>
如果你使用jquery：
$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
调用以下函数来dynamic加载CSS或JavaScript文件。
function loadjscssfile(filename, filetype) { if (filetype == "js") { //if filename is a external JavaScript file // alert('called'); var fileref = document.createElement('script') fileref.setAttribute("type", "text/javascript") fileref.setAttribute("src", filename) alert('called'); } else if (filetype == "css") { //if filename is an external CSS file var fileref = document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref != "undefined") document.getElementsByTagName("head")[0].appendChild(fileref) }
传递完整的文件path名称作为filename参数。
我知道这是一个非常古老的线程，但我的5美分。
还有另一种方法可以根据你的需要来做到这一点。
我有一个情况，我想要一个CSS文件只有一段时间活动。 像CSS切换一样。 激活CSS，然后在另一个事件激活它。
而不是dynamic加载的CSS，然后删除它可以添加一个类/一个ID在新的CSS所有元素的前面，然后切换您的CSS的基本节点（如身体标记）的类/ ID。
你会用这个解决scheme有更多的CSS文件最初加载，但你有一个更dynamic的切换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); }); };
有一个通用的jquery插件，可以根据需要加载css和JS文件。 它也跟踪什么已经加载:)请参阅： http ： //code.google.com/p/rloader/
下面是jQuery的元素创build方法（我的首选）和callbackonLoad ：
var css = $("<link>", { "rel" : "stylesheet", "type" : "text/css", "href" : "style.css" })[0]; css.onload = function(){ console.log("CSS IN IFRAME LOADED"); }; document .getElementsByTagName("head")[0] .appendChild(css);
YUI库可能是你正在寻找的。 它也支持跨域加载。
如果你使用jQuery， 这个插件做同样的事情。
您可以使用这个YUI库或者使用这篇文章来实现
下面是用于加载JS和/或CSS的完整代码
function loadScript(directory, files){ var head = document.getElementsByTagName("head")[0] var done = false var extension = '.js' for (var file of files){ var path = directory + file + extension var script = document.createElement("script") script.src = path script.type = "text/javascript" script.onload = script.onreadystatechange = function() { if ( !done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") ) { done = true script.onload = script.onreadystatechange = null // cleans up a little memory: head.removeChild(script) // to avoid douple loading } }; head.appendChild(script) done = false } } function loadStyle(directory, files){ var head = document.getElementsByTagName("head")[0] var extension = '.css' for (var file of files){ var path = directory + file + extension var link = document.createElement("link") link.href = path link.type = "text/css" link.rel = "stylesheet" head.appendChild(link) } } (() => loadScript('libraries/', ['listen','functions', 'speak', 'commands', 'wsBrowser', 'main'])) (); (() => loadScript('scripts/', ['index'])) (); (() => loadStyle('styles/', ['index'])) ();
var fileref = document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("th:href", "@{/filepath}") fileref.setAttribute("href", "/filepath")
我正在使用百里香，这工作正常。 谢谢
使用此代码：
var element = document.createElement("link"); element.setAttribute("rel", "stylesheet"); element.setAttribute("type", "text/css"); element.setAttribute("href", "external.css"); document.getElementsByTagName("head")[0].appendChild(element);
