如何通过JavaScript覆盖内联CSS？

Question

我们能否通过JavaScript覆盖内联CSS？支持IE6兼容性。我找到了这个纯CSS的解决方案，但在IE中不起作用。

http://nataliejost.com/override-inline-styles-from-the-stylesheet/

http://www.sitepoint.com/blogs/2009/05/27/override-inline-css/

<div class="block">
    <span style="font-weight: bold; color: red;">Hello World</span>
</div>

我们可以使用这个解决方案覆盖掉这个内联样式。

.block span[style]{
    font-weight: normal !important;
    color: #000 !important;
}

这个解决方案在除了IE6以外的所有主流浏览器中都有效。

- Jitendra Vyas

---

在标题后删除了[solved]，在SO上的问题永远不会被最终解决，总是可能有更好的替代方案或值得注意的变体。毕竟SO是一个维基百科。 - markus

Answer 1

当然可以，你可以使用jQuery的css()方法：http://docs.jquery.com/CSS/css#namevalue 所以，如果你有以下HTML代码：

<p style="color:red;">A colored text</p>

你可以通过以下jQuery代码来改变颜色：

$("p").css("color","blue");

它将在IE6中正常工作。

- Guillaume Flandre

---

有没有纯CSS的解决方案可以做到这一点？ - Jitendra Vyas

jQuery的css()实际上在DOM中添加了内联CSS。反过来做，用css覆盖jQuery的css()更困难（虽然可以使用!important，在IE6中不起作用）。 - David Hellsing

你想在运行时还是在文件中进行更改？如果在文件中，只需使用style属性即可，否则在运行时需要使用客户端脚本语言。 - Russ Cam

我不确定你在问什么，但在我的示例情况下，你可以尝试将 "p {color: blue !important;}" 写入CSS文件。 - Guillaume Flandre

@Jitendra：纯CSS解决方案是添加!important，但正如之前所说，IE6不遵循。在w3c上阅读有关CSS继承的更多信息。 - David Hellsing

@david 如果 CSS 动态添加到 DOM 中，那么如果你来回切换某些东西，它最终会变成一个非常庞大的 DOM 吗？还是它会智能地删除冗余的内容？ - Simon_Weaver

Answer 2

!important在IE6中是可以使用的，只是你的选择器span[style]不能工作，因为那里不支持属性选择器。如果你能找到另一个选择器来选择要覆盖的跨度，那就没问题了。也许只有.block span就足够了？

否则，如果你绝对必须更改它（难道你对标记没有任何控制吗？），那么你可以从JavaScript中更改它：

span.style.fontWeight= 'normal';
span.style.color= 'black';

- bobince