Проблема
У меня есть следующий код:
<html>
<head>
<style id="ID_Style">
.myStyle
{
color : #FF0000 ;
}
</style>
</head>
<body>
<p class="myStyle">
Hello World !
</p>
</body>
</html>
И я хочу изменить содержимое <style> через JavaScript.
Ожидаемое решение
Первым решением было использование свойства innerHTML элемента style (полученного через его идентификатор), но, хотя он работает в Firefox, он не работает в Internet Explorer 7.
Итак, я использовал чистые методы DOM, то есть создавал элемент с именем style, текстовый узел с нужным содержимым, добавлял текстовый узел как дочерний элемент к стилю и т. Д. Он тоже не работает.
Согласно MSDN, элемент <style> имеет свойство innerHTML, а согласно W3C элемент <style> является HTMLStyleElement, который происходит от HTMLElement, полученного из Element, полученного из Node, который имеет метод 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>
Спасибо!
Редактировать
Обратите внимание, что перемещение элемента <style> из <head> в <body> не меняет проблему.