如何通过IE/FF将CSS规则添加到文档片段中

How do I add CSS rules to a document fragment across IE/FF?

本文关键字：添加 文档 片段 规则 CSS IE 何通过 FF      更新时间：2023-09-26

我试图创建一个文档片段，然后对其进行样式设置，但遇到了不少困难。讽刺的是，IE不是我的问题！

我有这个：

var newDom = document.createDocumentFragment();
newDom.appendChild(document.createElement("style"));
newDom.appendChild(document.createElement("div"));
if (newDom.childNodes[0].styleSheet){
    newDom.childNodes[0].styleSheet.cssText = "div{color:red;}";
    alert(newDom.childNodes[1].currentStyle.color);
}else{
    newDom.childNodes[0].appendChild(document.createTextNode("div{color:red;}"));
    alert(window.getComputedStyle(newDom.childNodes[1], null).color);
};

它在IE7/8/9中警告"红色"，但在FF3.0/4/10中警告"rgb（0,0,0）"。是的，我需要知道应用了什么样式，所以我需要阅读FF中的getComputedStyle（或者使用其他方法，只要它可靠）。

我做错了什么？这可能吗？（我想/希望如此…）

我试过很多东西，比如"newDom.styleSheets"，它存在于IE中，但不存在于FF中，但都没有用。

请帮忙-谢谢！：D

在网上阅读，使用Javascript更改CSS的正确语法似乎是：

obj.style.cssText = 'something';

无论如何，这似乎并不能解决问题。我建议你阅读这篇文章，这可能会对你有所帮助：http://www.phpied.com/the-new-game-show-will-it-reflow/.

我还建议更改方法，将CSS代码放在预先存在的CSS样式表中，与.red-color之类的类相关联，然后将该类放在新创建的div中，使用setAttribute('class', 'red-color')。另一种选择是将样式设置为内联，始终使用相同的函数：setAttribute('style', 'color: red')。

相关文章：