用JavaScript添加CSS到<head>?
有没有办法从javascript文件中的string中添加CSS到JavaScript文档的头部?
比方说,我们有一个网页,其中有一个灯箱脚本,这个脚本需要一个CSS文件的function。
现在使用<link>
添加这个css文件,即使没有启用js的人也可以下载css文件。
我知道我可以dynamic加载脚本的CSS文件,但这也意味着会有2个http请求,并且在文件中几乎没有css的情况下,我觉得这是低效的。
所以我想,如果你可以把你在css文件中的css放到脚本中,让脚本parsingcss并将它添加到头部,或者甚至更好的是让脚本直接将css添加到文档的<head>
。
但是,我没有发现任何networking上,这表明这是可能的,所以是否有可能添加CSS与js的头?
编辑+解决scheme:
我编辑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); }
如果你不想依赖一个javascript库,你可以使用document.write()
来将所需的CSS包装在style
标签中,直接放到文档head
:
<head> <script type="text/javascript"> document.write("<style>body { background-color:#000 }</style>"); </script> # other stuff.. </head>
这样你可以避免触发额外的HTTP请求。
还有其他解决scheme已被build议/添加/删除,但我没有看到任何过分复杂的东西,已经很好的跨浏览器。 祝你好运!
编辑 :作为Atspulgs评论build议,你可以实现没有jQuery使用querySelector相同:
document.querySelector('head').innerHTML += '<link rel="stylesheet" href="styles.css" type="text/css"/>';
较老的答案在下面。
您可以使用jQuery库来select您的head元素并将HTML附加到它,如下所示:
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
你可以在这里find这个问题的完整教程
一个简单的非jQuery解决scheme,尽pipe对于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
或在style
元素上使用appendChild
。 这是一个错误报告 ,这表明了这一点,虽然我认为它不正确地确定问题。 上面的解决方法是从错误报告的评论,并已在IE6和IE9testing。
无论你使用这个,document.write还是更复杂的解决scheme都将取决于你的情况。
这是一个在所有主stream浏览器中dynamic创buildCSS规则的函数。 createCssRule
一个select器(例如“p.purpleText”),一个规则(例如“color:purple;”)和可选的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;");