Błąd Chrome z NO_MODIFICATION_ALLOWED_ERR DOM Wyjątek 7

Question

Mam poniżej kod, aby wstawić styl do DOM (istnieje przypadek użycia do wstrzykiwania stylu do DOM, więc proszę nie pytać dlaczego lub powiedzieć załadować css w pliku .css).

<script type="text/javascript"> 
window.onload = function() 
{ 
    var bmstyle = document.createElement('style'); 
    bmstyle.setAttribute('type', 'text/css'); 
    var styleStr = "#test-div {background:#FFF;border:2px solid #315300;"; 
    bmstyle.innerHTML = styleStr; 
    document.body.appendChild(bmstyle); 
} 

</script> 

Jeśli działam w Firefoksie, działa dobrze. Ale mam ten błąd w Google Chrome:

Line bmstyle.innerHTML = styleStr; 
Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7 

Czy ktoś ma poprawkę? Dzięki

Answer 1

Myślę, że to dlatego, że używasz innerHTML wszędzie, gdzie używasz składni XML. Spróbuj:

bmstyle.nodeValue = styleStr; 

Propozycja 2:

Być może również dlatego, że staramy się ustawić innerHTML o element jeszcze w DOM HTML. Jeśli o to chodzi, moja pierwsza propozycja powinna nadal trzymać się, czy można przejść z:

document.body.appendChild(bmstyle); 
bmstyle.innerHTML = styleStr; 

Nie jestem pewien, czy należałoby linię pomiędzy nimi, aby odzyskać elementu lub jeżeli bmstyle nadal wskazywać do tego.

Answer 2

To mógłby być, bo to nieważne umieścić <style> elementów wewnątrz organizmu, ale szczerze mówiąc byłbym zaskoczony

Answer 3

Ja też miałem ten problem, spróbuj tego:

bmstyle.value = styleStr; 

Answer 4

Spróbuj użyć:

<f:view xmlns:f="http://java.sun.com/jsf/core" contentType="text/html" /> 

Answer 5

Używaj innerText/textContent. Lub utwórz węzeł tekstowy ze stylami i dodaj go do znacznika stylu. Nie dlatego, że styl jest w ciele, ale zawsze można go dodać do głowy, co nie rozwiązuje problemu.

Answer 6

Notatka na przyszłość ... Używam następującej funkcji do dynamicznego tworzenia stylów CSS. Stwierdziłem, że przy użyciu textContent działało najlepiej.

To łamie na Safari

el.innerHTML = css.join('\n'); 

To łamie na FireFox

el.innerText = css.join('\n'); 

Poniżej jest mój ostateczny kod, który działa na obu przeglądarkach. IE nie testowane ...

/** 
* Write out stylesheets to the page. 
* 
* @param {array} css 
*/ 
function print_css(css) { 
    var headTag = document.getElementsByTagName('head')[0], 
     el = document.createElement('style'); 

    el.type = 'text/css'; 
    el.textContent = css.join('\n'); 
    headTag.appendChild(el); 
}