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

【问题标题】：Change the content of a <style> element through JavaScript通过 JavaScript 更改 <style> 元素的内容
【发布时间】：2010-04-23 11:51:52
【问题描述】：

问题

我有以下代码：

<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 的元素，一个带有所需内容的文本节点，并将该文本节点附加为 style 节点的子节点等，也失败了。

根据MSDN，<style>元素有一个innerHTML属性，而根据W3C，<style>元素是一个HTMLStyleElement，它派生自HTMLElement，派生自Element，派生自Node，它有appendChild方法.似乎<style> 元素的内容在 Internet Explorer 上是只读的。

问题

所以问题是：有没有办法在 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> 不会改变问题。

【问题讨论】：

但是您可以通过重要！无论如何...
@Tchalvak：目的是在样式元素中动态生成 CSS 代码，并根据用户的选择（即通过 JavaScript）对其进行更新。目的是不更改文档内所有元素的类或样式属性。
这正是 jQuery 的设计目的。你有什么理由不想使用它吗？

标签： html dom coding-style

【解决方案1】：

动态生成 CSS 有其优势。如果您想在 IE 中设置样式元素的 innerHTML，请使用 styleSheet.cssText。例如：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.styleSheet.cssText 是我正在寻找的。在以下 MSDN 页面的 cmets 中确认：msdn.microsoft.com/en-us/library/ms536398.aspx ...我会在工作中尝试（我这里没有 IE）。
我也没有IE，我只是用IE NetRender在linux上做简单的测试。
更好的方法是使用特征检测：if (style.styleSheet) { style.styleSheet.cssText = styles; } else { style.innerHTML = styles; }

【解决方案2】：

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

【讨论】：