是否有可能导入css样式表到一个html页面使用Javascript?如果是,该怎么做呢?
p.s. javascript将托管在我的网站上,但我希望用户能够把他们的网站的<头>标签,它应该能够导入一个css文件托管在我的服务器到当前的网页。(CSS文件和javascript文件都将托管在我的服务器上)。
是否有可能导入css样式表到一个html页面使用Javascript?如果是,该怎么做呢?
p.s. javascript将托管在我的网站上,但我希望用户能够把他们的网站的<头>标签,它应该能够导入一个css文件托管在我的服务器到当前的网页。(CSS文件和javascript文件都将托管在我的服务器上)。
当前回答
我想类似这样的脚本可以做到:
<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);
}
//]]>
其他回答
我想类似这样的脚本可以做到:
<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);
}
//]]>
元素。insertAdjacentHTML有很好的浏览器支持,可以在一行中添加一个样式表。
document.getElementsByTagName("head")[0].insertAdjacentHTML(
"beforeend",
"<link rel=\"stylesheet\" href=\"path/to/style.css\" />");
可以用于这个YUI库,也可以使用本文实现
我知道这是一个相当老的帖子,但这里是我的5美分。
根据您的需要,还有另一种方法可以做到这一点。
我有一个情况下,我想要一个css文件是活跃的,只有一段时间。比如css切换。激活css,然后在另一个事件后取消激活它。
而不是动态加载css然后删除它,你可以在新css的所有元素前添加一个Class/ id,然后只需切换css的基本节点的Class/ id(如body标签)。
你会用这个解决方案有更多的css文件最初加载,但你有一个更动态的方式切换css布局。
YUI库可能就是您正在寻找的。它还支持跨域加载。
如果你使用jquery,这个插件做同样的事情。