如何使用Javascript加载CSS文件？ [英] How to load up CSS files using Javascript?
问题描述
是否可以使用Javascript将CSS样式表导入HTML页面？如果是这样，怎么办？
这个javascript将被托管在我的网站上，但我希望用户能够把< head> 标记，并且它应该能够将托管在我的服务器上的css文件导入当前网页。 （这两个css文件和javascript文件将托管在我的服务器上）。
这里是oldschool它，希望工作在所有浏览器。理论上你会使用setAttribute不幸的是IE6不支持它一贯。
var cssId ='myCss'; //你可以编码css路径本身来生成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路径是绝对的，因此从您的服务器加载。 / p>
VanillaJS
下面是一个使用纯JavaScript将一个CSS链接注入
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 ）。
Is it possible to import css stylesheets into a html page using Javascript? If so, how can it be done?
P.S the javascript will be hosted on my site, but I want users to be able to put in the <head> tag of their website, and it should be able to import a css file hosted on my server into the current web page. (both the css file and the javascript file will be hosted on my server).
Here's the "oldschool" way of doing it, which hopefully works accross all browsers. In theory you would use setAttribute unfortunately IE6 doesn't support it consistently.
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);
}
This example checks if the CSS was already added so it adds it only once.
Put that code into a javascript file, have the end-user simply include the javascript, and make sure the CSS path is absolute so it is loaded from your servers.
VanillaJS
Here is an example that uses plain JavaScript to inject a CSS link into the head element based on the filename portion of the URL:
<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>
Insert the code just before the closing head tag and the CSS will be loaded before the page is rendered. Using an external JavaScript (.js) file will cause a flash of unstyled content (FOUC) to appear.
这篇关于如何使用Javascript加载CSS文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
