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

Question

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

问题

我有以下代码:

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

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

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

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

预期的解决方案

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

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

根据MSDN,该<style>元素具有innerHTML属性,并且根据W3C,该<style>元素是HTMLStyleElement,它派生自HTMLElement,派生自从Node派生的Element,其具有appendChild方法.它似乎表现为<style>在Internet Explorer上只读取元素的内容.

问题

所以问题是:有没有办法<style>在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>

Run Code Online (Sandbox Code Playgroud)

谢谢 !

编辑

请注意,将<style>元素从中移动<head>到<body>不会改变问题.

Answer 1

Lim*_*ime 15

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Stu*_*ley 10

今天,在所有浏览器(包括我相信IE9 +),可以设置的值textContent的上style元素,它一定会给你想要的方式,包括>在选择.

归档时间：	16 年，1 月前
查看次数：	8666 次
最近记录：	9 年，7 月前