带有 NO_MODIFICATION_ALLOWED_ERR DOM 异常 7 的 Chrome 错误

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

我也是，我也有这个问题，试试这个：

bmstyle.value = styleStr;

Answer 2

尝试使用：

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

Answer 3

只是一个注释以供将来参考...我正在使用以下函数来动态创建 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 4

使用innerText / textContent。 或者创建一个带有样式的文本节点，并将其添加到样式标签中。 不是因为样式在body里，加上你总是可以加到head里，这并不能解决问题。

Answer 5

这可能是因为将<style>元素放在正文中是无效的，但老实说我会感到惊讶

Answer 6

我认为这是因为您使用的是innerHTML，而其他任何地方您都在使用 XML 语法。试试：

bmstyle.nodeValue = styleStr;

建议二：

这也可能是因为您试图设置一个尚未在 HTML DOM 中的元素的 innerHTML。如果是这样的话，我的第一个建议应该仍然成立，或者你可以选择：

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

我不确定您是否需要在中间添加一条线来回收元素，或者 bmstyle 是否仍会指向它。