更改< style>的内容通过JavaScript的元素 [英] Change the content of a <style> element through JavaScript
问题描述
我有以下代码：
<html>
<head>
<style id="ID_Style">
.myStyle
{
color : #FF0000 ;
}
</style>
</head>
<body>
<p class="myStyle">
Hello World !
</p>
</body>
</html>
我想修改< style> 通过JavaScript。
And I want to modify the contents of <style> through JavaScript.
第一个解决方案是使用style元素（通过其id检索），但是虽然它在Firefox上可以运行，但在Internet Explorer 7上却无法使用。
The first solution was to use the innerHTML property of the style element (retrieved through its id), but while it works on Firefox, it fails on Internet Explorer 7.
因此，我使用了纯DOM方法，即创建一个名为style的元素，一个具有所需内容的文本节点，并将该文本节点附加为style节点的子节点，依此类推。它也会失败。
So, I used pure DOM methods, that is, creating an element called style, a text node with the desired content, and append the text node as a child of the style node, etc. It fails, too.
对MSDN而言，< style> 元素具有 innerHTML 属性，根据W3C，< style> 元素是HTMLStyleElement，它是从HTMLElement派生而来的，而HTMLElement是从Node派生而来的，后者具有appendChild方法。似乎表现为< style> 元素的内容在Internet Explorer上是只读的。
According to MSDN, the <style> element has an innerHTML property, and according to W3C, the <style> element is a HTMLStyleElement, which derives from HTMLElement, deriving from Element deriving from Node, which has the appendChild method. It seems to behave as if the content of a <style> element was readonly on Internet Explorer.
所以问题是：是否有一种方法可以修改< style> Internet Explorer上的元素？
So the question is: Is there a way to modify the content of a <style> element on Internet Explorer?
虽然当前的问题是IE7，但跨浏览器的解决方案如果可能的话会很酷。
While the current problem is with IE7, a cross-browser solution would be cool, if possible.
样式元素（MSDN）：< a href = http://msdn.microsoft.com/en-us/library/ms535898.aspx rel = nofollow noreferrer> http://msdn.microsoft.com/zh-CN/library/ms535898.aspx
Style Element (MSDN): http://msdn.microsoft.com/en-us/library/ms535898.aspx
HTMLStyleElement（W3C）： http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-16428977
HTMLStyleElement (W3C): http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-16428977
如果要重现问题，可以使用以下测试代码：
You can use this test code if you want to reproduce your problem:
<html>
<head>
<style id="ID_Style">
.myStyle
{
color : #FF0000 ;
}
</style>
<script>
function replaceStyleViaDOM(p_strContent)
{
var oOld = document.getElementById("ID_Style") ;
var oParent = oOld.parentNode ;
oParent.removeChild(oOld) ;
var oNew = document.createElement("style") ;
oParent.appendChild(oNew) ;
oNew.setAttribute("id", "ID_Style") ;
var oText = document.createTextNode(p_strContent) ;
oNew.appendChild(oText) ;
}
function replaceStyleViaInnerHTML(p_strContent)
{
document.getElementById("ID_Style").innerHTML = p_strContent ;
}
</script>
<script>
function setRedViaDOM()
{
replaceStyleViaDOM("\n.myStyle { color : #FF0000 ; }\n")
}
function setRedViaInnerHTML()
{
replaceStyleViaInnerHTML("\n.myStyle { color : #FF0000 ; }\n")
}
function setBlueViaDOM()
{
replaceStyleViaDOM("\n.myStyle { color : #0000FF ; }\n")
}
function setBlueViaInnerHTML()
{
replaceStyleViaInnerHTML("\n.myStyle { color : #0000FF ; }\n")
}
function alertStyle()
{
alert("*******************\n" + document.getElementById("ID_Style").innerHTML + "\n*******************") ;
}
</script>
</head>
<body>
<div>
<button type="button" onclick="alertStyle()">alert Style</button>
<br />
<button type="button" onclick="setRedViaDOM()">set Red via DOM</button>
<button type="button" onclick="setRedViaDOM()">set Red via InnerHTML</button>
<br />
<button type="button" onclick="setBlueViaDOM()">set Blue via DOM</button>
<button type="button" onclick="setBlueViaInnerHTML()">set Blue via InnerHTML</button>
</div>
<p class="myStyle">
Hello World !
</p>
</body>
</html>
谢谢！
请注意，将< style> 元素从< head> 放入< body> 不会改变问题。
Note that moving the <style> element from the <head> into the <body> doesn't change the problem.
推荐答案
即时生成CSS具有其优势。如果要在IE中设置样式元素的innerHTML，请使用styleSheet.cssText。例如： http://jsbin.com/awecu4
Generating CSS on the fly has its advantages. If you would like to set the innerHTML of a style element in IE use styleSheet.cssText. For example: http://jsbin.com/awecu4
<!doctype html>
<script>
var style = document.createElement('style'),
script = document.getElementsByTagName('script')[0],
styles = '#test{background:green;}';
script.parentNode.insertBefore(style, script);
try{style.innerHTML = styles;}
//IE fix
catch(error){style.styleSheet.cssText = styles;}
</script>
<div id=test>Div with id of test</div>
这篇关于更改< style>的内容通过JavaScript的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
