javascript - 用 javascript 在头部注入(inject) css 代码动态编辑 css 好吗？

Question

在头部注入(inject) CSS 代码以永久设置/更改某物的属性是否“合法”并且可以跨浏览器工作？

例如(使用 jQuery):

$('head').append('<style>.myclass { background: #f00;}</style>');

我已经在 Safari 7 中尝试过并且有效。

可以跨浏览器还是要避免黑客入侵？

有什么缺点吗？

Answer 1

是的，它是合法的 - 而且它会比 $(".myclass").css({background: "#FF0"}) 更快因为您只与 DOM 交互 一次 而不是 N次(其中 N 是页面上 .myclass 元素的数量。)此外，它将应用于 future 的 .myclass。元素自动。

缺点是您可能遇到特殊性问题，因此您必须确保以一种方式构建您的 CSS，以确保您可以使用单个类选择器覆盖背景。 (jQuery 的 css 函数，因为它直接设置元素的 style 属性，默认情况下具有一些最高的特异性，因此避免了这个特殊问题)。

例如，如果您在链接样式的某处有此 CSS:

#some-id .myclass { background: #000; }

然后是 DOM-heavy $(".myclass").css会覆盖背景，而动态注入(inject)的样式(仅注入(inject) .myclass { background: #FF0; } 不会)。

另一个缺点是旧版 IE (<=8) 只允许您创建 31 个“动态”样式表。在 IE >= 9 中，这不是问题。