Question

问题

我有以下代码：

<html>
<head>
<style id="ID_Style">
.myStyle
{
   color : #FF0000 ;
}
</style>
</head>
<body>

   <p class="myStyle">
      Hello World !
   </p>

</body>
</html>

我想通过JavaScript修改<style>的内容。

预期解决方案

第一个解决方案是使用样式元素的innerHTML属性（通过其id检索），但是当它在Firefox上运行时，它在Internet Explorer 7上失败。

所以，我使用纯DOM方法，即创建一个名为style的元素，一个包含所需内容的文本节点，并将文本节点附加为样式节点的子节点等。它也失败了。

根据MSDN，<style>元素具有innerHTML属性，根据W3C，<style>元素是HTMLStyleElement，它派生自HTMLElement，派生自从Node派生的Element ，它有appendChild方法。它看起来好像在Internet Explorer上只读取<style>元素的内容。

问题

所以问题是：有没有办法在Internet Explorer上修改<style>元素的内容？

虽然目前的问题在于IE7，但如果可能的话，跨浏览器解决方案会很酷。

附录

来源：

样式元素（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

完整的测试代码

如果要重现问题，可以使用此测试代码：

<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>并不会改变问题。

Answer 1

动态生成CSS有其优点。如果您想在IE中使用styleSheet.cssText设置样式元素的innerHTML。例如：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>

Answer 2

今天，在所有浏览器中（包括我相信IE9 +），您可以在textContent元素上设置style的值，它将按您希望的方式工作，包括> in选择器。

通过JavaScript </style>更改<style>元素的内容

问题

预期解决方案

问题

附录

来源：

完整的测试代码

修改

2 个答案: