Question

有谁知道如何使用jQuery重置元素的样式？例如，我有一个这样的样式表：

.container-red {  background-color: #f00; }
.container-red #innerbox { background-color: #fff; }
.container-white { background-color: #fff; }
.container-white #innerbox { background-color: #f00; }
#innerbox { margin: 20px; }

这个标记：

<div id="container" class="container-red">
     <div id="innerbox">Some text here</div>
</div>

然后当我使用jQuery更改类时

$("#container").removeClass("container-red").addClass("container-white");

内箱样式不会改变以匹配，因为它已经被设计了样式，这留下了一个白色的容器和一个白色的内盒，而不是一个白色的容器和一个红色的内盒。因此，我希望能够做类似

的事情

$("#container").children().resetStyles();

让每个容器子项更新为正确的样式

编辑：对不起，你没事，代码确实运行正常，我的问题只是我有一些其他的CSS覆盖了我的班级样式。

Answer 1

你做错了我认为因为我测试了它并且对我来说它有效：

http://jsfiddle.net/VH4du/

我在chrome，firefox和IE9上测试过它。

Answer 2

它确实对我有所改变。查看示例here。

Answer 3

问题不在于您的jQuery代码，也不是该元素已经设置过样式。任何体面的和最近的浏览器都会自动重新应用样式到内部元素。

问题是你正在使用innerbox作为ID：因为只有一个带有id的元素，某些浏览器的CSS引擎会给出奇怪的优先级，并可能绕过一些CSS规则。

尝试将内盒转换为CLASS，它应该按预期工作。

BTW，哪个浏览器暴露了这个问题？

使用jQuery重置元素样式

3 个答案: