Question

是否“合法”并且跨浏览器在头部注入CSS代码以便永久地设置/更改某些内容的属性？

例如（使用jQuery）：

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

我已经在Safari 7中尝试过它了。

是否可以并且跨浏览器或者是要避免的黑客攻击？

有任何缺点吗？

Answer 1

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

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

例如，如果你在链接样式的某个地方有这个CSS：

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

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

另一个缺点是旧IE（＆lt; = 8）只允许您创建31个“动态”样式表。在IE＆gt; = 9中，这不是问题。

Answer 2

我认为你正面临一个4解决方案。

这些都不是真的优雅或完美，但这是我的2美分：

在HTML的主题部分中注入css

这正是您在问题中建议的内容。此解决方案效果很好，但仅在修改发生一次时才有效。如果您需要批准许多后续修改，HTML的主要部分可能会变得拥挤。
您可以使用Javascript检测DOM对象的插入并保持同步

在这里，你是一个完全按照这个方式执行的JSFiddle：http://jsfiddle.net/ITnok/9FQVa/28/

如果您（可能是您的用户）应该及时传播许多更改，此解决方案可以正常工作，但前提是您可以控制DOM对象插入：关键是创建自定义事件以在每次触发时触发插入一个新对象。

这里是来自JSFiddle的处理自定义事件的代码块：
```
//    This event is the key to keep CSS in sync... in realtime!
$( document )
    .on( 'mickeymouseadded', '.mickeymouse', function( e ) {
        $( this )
            .attr(
                'style',
                $( this )
                    .siblings( ':first' )
                    .attr( 'style' )
            );
    } );
```
您可以使用MutationObserver（新旧版本和已弃用的变异事件）

此处您是文档的链接：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

这是处理问题的一种很棒的方法，但不幸的是它与旧版本的Interdict Exploder不兼容（哎呀，对不起拖钓！:-)）。只有IE11支持它们。

即使对象插入不在您的直接控制范围内，您也无法创建自定义事件或不想创建自定义事件，此方法也能正常工作。
您可以使用名为livequery
的jQuery插件
这里是jQuery livequery的Github回购的链接：https://github.com/brandonaaron/livequery

从未尝试过这个插件，但看起来它可能是查询DOM并确定需要修改和保持同步的好方法。

所有这些解决方案都基于Javascript的存在

但据我所知，你告诉我们这对你来说不是问题！ ; - ）

希望它有所帮助...

Answer 3

如果用户在浏览器中禁用了javascript（加载页面的速度更快），则应该是一个问题。

你应该：

在css文件中编写您网站的固定css
只有在你要进行一些解析时才使用js（如果你想在每个<span class="to_change">...</span>中插入一些css）。

用javascript注入头部的css代码动态编辑css是不是很好？

3 个答案:

所有这些解决方案都基于Javascript的存在