在头部注入(inject) CSS 代码以永久设置/更改某物的属性是否“合法”并且可以跨浏览器工作?
例如(使用 jQuery):
$('head').append('<style>.myclass { background: #f00;}</style>');
我已经在 Safari 7 中尝试过并且有效。
可以跨浏览器还是要避免黑客入侵?
有什么缺点吗?
最佳答案
是的,它是合法的 - 而且它会比 $(".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 中,这不是问题。
关于javascript - 用 javascript 在头部注入(inject) css 代码动态编辑 css 好吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21064431/