代码之家 › 专栏 › 技术社区 › paercebal

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

coding-style dom html

paercebal · 技术社区 · 14 年前

问题

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

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

</body>
</html>

我想修改 <style> 通过JavaScript。

期望的解决方案

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

根据MSDN的说法 < 元素具有 innerHTML 属性,根据W3C <样式> <样式> 元素在Internet Explorer上是只读的。

问题

有没有办法修改 < Internet Explorer上的元素?

虽然目前的问题是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>

谢谢!

请注意,移动 < 元素从 <head> <body> 不会改变问题。

2 回复 | 直到 10 年前

Lime 12 年前

动态生成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>

Stuart P. Bentley 9 年前

textContent 上 style 元素,它将按您希望的方式工作,包括 > 在选择器中。