使用 jquery 删除内联样式时忽略原始样式表设置答案

【问题标题】：Original stylesheet settings ignored when inline styles are removed with jquery使用 jquery 删除内联样式时忽略原始样式表设置
【发布时间】：2018-09-20 20:48:59
【问题描述】：

我有一个样式表，其中设置了一些样式。

其中一种样式的 position 设置为“固定” - 但仅适用于某些组合。

例如：

.mystyle.blue {
    position: fixed;
}

所以，.blue 是固定的，但普通的 .mystyle 本身不会收到相同的样式。

我还有一些 jQuery 的东西，可以添加和删除内联样式。因此，在某些情况下，它可能会将position: fixed 添加到所有.mystyle 变体中。

这很简单，使用：

$(".mystyle").css("position", "fixed")添加；

和$(".mystyle").removeAttr("style"); 删除。

但是，一旦删除，底层样式表设置就会被忽略。所以，我仍然希望.mystyle.blue 尊重position: fixed，但事实并非如此。

关于解决方法的任何想法？

更新

我现在知道发生了什么，并进行了修复，但这不是我所期望的。

在使用 jQuery 设置position: fixed 时，我还设置了一个顶部位置。这是否定的 - -64px（尽管实际上它是动态设置的）。显然，两者同时被删除。

样式表代码是这样的：

position: fixed;
top: 0;

我认为一旦删除内联样式样式就会再次生效 - 一个会，一个不会。

负的最高位置似乎没有恢复为 0。这可能只是我的理解不足。该位置确实恢复为默认值。

如果我向top: 0!important 添加一个重要标签，它确实有效。

【问题讨论】：

它应该可以工作，你有一个工作的例子吗？
sn-p 将有助于检测问题。！
您不需要“解决方法”。浏览器和 jQuery 足够稳定来处理这些基本的东西。问题必须在您的代码中。
见jsfiddle.net/rchdmzku/5
@undefined - 我现在正在查看代码。

标签： jquery css

【解决方案1】：

没有.mystyle 变体之类的东西。 .mystyle.blue 是一个复合 CSS 选择器，它将规则应用于具有 myStyle 和 blue 类的任何元素，而它同时具有这两个类。如果您删除其中任何一个，则规则不再适用。

$(".mystyle").css("position", "fixed")

在页面中当前具有mystyle 类的任何元素的style 属性中添加position:fixed;。请注意 mystyle 和 myStyle 是不同的类。 CSS 选择器区分大小写！

任何内联样式规则都比通过 CSS 规则应用的类具有更高的特异性，除非样式表规则以 !important 为后缀（你不应该使用它，它是一堆虫子！）。

$(".mystyle").removeAttr("style");

将完全删除style 属性，而不仅仅是您添加的position:fixed;。如果您对以前具有 style 属性的元素执行此操作，您将在再次隐藏和显示该元素后丢失这些规则。最好将position属性恢复为static的默认值：

$('.mystyle').css({position:'static'})

【讨论】：