jQuery：如何从元素中删除嵌入的样式？答案

【问题标题】：jQuery: how to remove an embedded style from an element?jQuery：如何从元素中删除嵌入的样式？
【发布时间】：2009-06-15 17:21:59
【问题描述】：

我有一个使用<li> 作为标签定义的标签容器（常见做法）。 <li> 在style.css 文件中具有与之关联的样式。这具有背景颜色和背景图像。

现在，内容中包含<li> 的选项卡下方的每个容器都将具有样式表定义（背景图像和颜色）。

如何使用 jQuery 在内容区域中覆盖它？我无法更改内容，因为它是数据库驱动的，并且在应用程序的其他地方使用。

谢谢！

【问题讨论】：

标签： jquery css

【解决方案1】：

您实际上并不需要 jQuery，您可以简单地将 CSS 声明添加到您的层次结构中，删除子 li 的背景颜色和图像。例如，

.tabs li { background-color: red; background-image: url(something.jpg) }

.tabs li div li { background-color: transparent; background-image: none; }

要使用 jQuery 来做到这一点，

$(".tabs > li div li").css("background-color", "transparent");
$(".tabs > li div li").css("background-image", "none");

【讨论】：

【解决方案2】：

您可以通过指定更具体的规则来覆盖 CSS - 这很麻烦，因为您需要取消设置之前指定的规则，但这是可能的。

例如，如果您有：

li {
   height: 100px;
}

您可以使用以下方法取消设置：

li li {
   height: auto;
}

更好的方法是确保选项卡的样式信息仅适用于选项卡。如果你向 tab-li 添加一个类，你可以设置

li.tab {
   height: 100px;
}

并且它不会影响选项卡下方的 li 元素。这样您就不必更改内容（我希望选项卡不是该内容的一部分），并且您不必求助于 javascript 来撤消操作。

【讨论】：

【解决方案3】：

我还没有尝试过，但我最好的猜测是在<li> 中添加一个<div> 标记，并将内容加载到<div> 中。然后，为<div> 创建一个定义，指定background:none。这应该会向下级联到加载的内容。

【讨论】：