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

У меня есть код для вставки стиля в 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

У кого-нибудь есть проблема? Благодаря

Ответ 1

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

bmstyle.nodeValue = styleStr;

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

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

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

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

Ответ 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);
}

Ответ 3

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

bmstyle.value = styleStr;

Ответ 4

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

Ответ 5

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

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

Ответ 6

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