Ошибка Chrome с NO_MODIFICATION_ALLOWED_ERR DOM Exception 7

Question

У меня есть код ниже для вставки стиля в DOM (есть вариант использования для вставки стиля в DOM, поэтому, пожалуйста, не спрашивайте почему или говорите загрузить CSS в файл .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>

Если я запускаю в Firefox, он работает нормально. Но я получил эту ошибку в Google Chrome:

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

У кого-нибудь есть починка? Спасибо

Answer 1

Я думаю, это потому, что вы используете innerHTML, когда везде вы используете синтаксис XML. Попробуйте:

bmstyle.nodeValue = styleStr;

Предложение 2:

Это также может быть связано с тем, что вы пытаетесь установить innerHTML для элемента, которого еще нет в HTML DOM. Если это так, то мое первое предложение должно остаться в силе, или вы можете использовать:

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

Я не уверен, что вам понадобится промежуточная строка для восстановления элемента или если bmstyle все еще будет указывать на него.

Answer 2

Просто примечание для дальнейшего использования ... Я использую следующую функцию для динамического создания стилей CSS. Я обнаружил, что использование textContent работает лучше всего.

Это ломается в Safari

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

Это перерыв на FireFox

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

Ниже приведен мой последний код, который работает в обоих браузерах. IE не проверен ...

/**
* 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);
}

Answer 3

Я тоже, у меня была эта проблема, попробуйте эту:

bmstyle.value = styleStr;

Answer 4

Используйте innerText / textContent. Или создайте текстовый узел со стилями и добавьте его в тег стиля. Это не потому, что стиль в теле, плюс вы всегда можете добавить его к голове, что не решает проблему.

Answer 5

Попробуйте использовать:

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

Answer 6

Это может быть потому, что нельзя помещать <style> элементы в тело, но, честно говоря, я был бы удивлен