Question

过去，我已经能够通过内联样式标记修改页面上的CSS。我知道这听起来很糟糕，但它是在自定义CSS写作时使用的一种WYSIWYG（虽然没有文字）。

我曾经做过类似的事情： tag.styleSheet.cssText = myrules;

我不知道究竟是什么时候，但是当我尝试这个时，IE开始说“无效的论据”。真正的关键是，tag.innerHTML = 'body {}'提供Unable to set value of the property 'innerHTML': object is null or undefined，这在任何其他浏览器中都不会发生。

修改

要清楚我正在使用内联样式标记。我不是试图使用内联样式属性。

<style type="text/css" id="mytag"></style>

如何更改该标签的内部？

编辑2 请看这个小提琴：

http://jsfiddle.net/tTr5d/

我的tag.styleSheet.cssText解决方案似乎与使用styleSheets属性完全相同。您可以注释掉cssText的最后一个定义，看它是否像@Teemu一样工作。所以现在我真的迷失了为什么它不适用于我的应用程序。如果有人有想法会破坏那些功能很棒的想法。与此同时，我将修补我的应用程序。

Answer 1

IE仅限于32个样式表。我喜欢在<link>之上忘记这个事实，似乎包括内联样式标记。

我更改了沙盒以启用缩小功能，因此可以将文件放在一起。

然后我的代码工作了。

所以看来，当你超过限制并通过JS插入时，在你尝试我所做的事情之前，你不会得到真正的错误。

Answer 2

您只能通过styleSheet集合（或styleSheets集合）获取对imports对象的引用。如果您直接引用style元素，那么您将获得一个HTML元素。（检查简单for..in - 循环中两个对象的属性，并查看差异）

这适用于所有IE，并立即呈现结果：

document.styleSheets['mytag'].addRule('BODY', 'background-color:red');

MSDN: styleSheet object

中的更多信息

Answer 3

您可以使用jQuery。如果是内联样式，则可以使用.attr()函数。

$("#myElement").attr('style')

否则，您可以看到.css()提供的内容。您可以使用它来获取和设置各种CSS样式。

Other CSS related jQuery methods

Answer 4

我从未对样式元素和IE的innerHTML好运。即使您需要为IE分支，dom方法也是可靠的;

没有jquery -

function addNewStyle(str, title){
    var el= document.createElement('style');
    if(title) el.title= title;
    if(el.styleSheet) el.styleSheet.cssText= str;
    else el.appendChild(document.createTextNode(str));
    document.getElementsByTagName('head')[0].appendChild(el);
    return el;
}

如何在IE中更改cssText？

4 个答案: