Tim*_*nen 61 html javascript css
有没有办法从javascript文件中的字符串添加CSS到javascript文档的头部？
假设我们有一个网页,它有一个灯箱脚本,这个脚本需要一个css文件来运行.
现在添加此css文件<link>将使css文件下载,即使对于没有启用js的人也是如此.
我知道我可以使用脚本动态加载css文件,但这也意味着将有2个http请求,并且在文件中几乎没有css的情况下,我发现这个效率低下.
所以我想,如果你可以将css文件中的css放入脚本中,让脚本解析css并将其添加到头部,或者更好的是让脚本直接添加css在<head>该文件中.
但是我没有在网上发现这表明这是可能的,所以有可能用js将css添加到头部吗？
我编辑了roryf的跨浏览器工作的答案(IE5除外)
使用Javascript:
function addcss(css){
var head = document.getElementsByTagName('head')[0];
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
if (s.styleSheet) { // IE
s.styleSheet.cssText = css;
} else { // the world
s.appendChild(document.createTextNode(css));
}
head.appendChild(s);
}
tho*_*aux 27
编辑:正如Atspulgs评论建议的那样,你可以使用querySelector实现相同的jQuery :
document.querySelector('head').innerHTML += '<link rel="stylesheet" href="styles.css" type="text/css"/>';
下面的答案较旧.
您可以使用jQuery库来选择头部元素并将HTML附加到其中,方式如下:
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
您可以在此处找到有关此问题的完整教程
Jer*_*iko 25
如果你不想依赖一个javascript库,你可以document.write()直接将所需的css(包含在style标签中)直接吐出到文档中head:
<head>
<script type="text/javascript">
document.write("<style>body { background-color:#000 }</style>");
</script>
# other stuff..
</head>
这样您就可以避免触发额外的HTTP请求.
还有其他解决方案已被建议/添加/删除,但我没有看到任何过分复杂的东西已经可以正常跨浏览器工作.祝好运!
moe*_*ley 20
当您尝试<head>使用JavaScript 添加一串CSS 时？将一串CSS注入页面中,使用<link>元素比使用<style>元素更容易.
以下内容p { color: green; }将向页面添加规则.
<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8,p%20%7B%20color%3A%20green%3B%20%7D" />
您只需通过URL编码CSS字符串并将其添加到HREF属性中,即可在JavaScript中创建此项.比所有<style>元素的怪癖或直接访问样式表简单得多.
var linkElement = this.document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(myStringOfstyles));
这将在IE 5.5中向上工作
您标记的解决方案将起作用,但此解决方案需要更少的dom操作且只需要一个元素.
ror*_*ryf 14
一个简单的非jQuery解决方案,虽然对IE有点破解:
var css = ".lightbox { width: 400px; height: 400px; border: 1px solid #333}";
var htmlDiv = document.createElement('div');
htmlDiv.innerHTML = '<p>foo</p><style>' + css + '</style>';
document.getElementsByTagName('head')[0].appendChild(htmlDiv.childNodes[1]);
看来IE不允许设置innerText,innerHTML或使用appendChild上style的元素.这是一个错误报告,演示了这一点,虽然我认为它错误地识别了问题.上面的解决方法来自对错误报告的评论,并已在IE6和IE9中进行了测试.
无论您使用它,document.write还是更复杂的解决方案都将取决于您的具体情况.
这是一个在所有主流浏览器中动态创建CSS规则的函数. createCssRule采用选择器(例如"p.purpleText"),规则(例如"color:purple;")和可选的a Document(默认使用当前文档):
var addRule;
if (typeof document.styleSheets != "undefined" && document.styleSheets) {
addRule = function(selector, rule) {
var styleSheets = document.styleSheets, styleSheet;
if (styleSheets && styleSheets.length) {
styleSheet = styleSheets[styleSheets.length - 1];
if (styleSheet.addRule) {
styleSheet.addRule(selector, rule)
} else if (typeof styleSheet.cssText == "string") {
styleSheet.cssText = selector + " {" + rule + "}";
} else if (styleSheet.insertRule && styleSheet.cssRules) {
styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length);
}
}
}
} else {
addRule = function(selector, rule, el, doc) {
el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
};
}
function createCssRule(selector, rule, doc) {
doc = doc || document;
var head = doc.getElementsByTagName("head")[0];
if (head && addRule) {
var styleEl = doc.createElement("style");
styleEl.type = "text/css";
styleEl.media = "screen";
head.appendChild(styleEl);
addRule(selector, rule, styleEl, doc);
styleEl = null;
}
};
createCssRule("body", "background-color: purple;");
这里有一个简单的方法。
/**
* Add css to the document
* @param {string} css
*/
function addCssToDocument(css){
var style = document.createElement('style')
style.innerText = css
document.head.appendChild(style)
}