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

问题描述 投票:1回答:1

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

其中一种风格的位置设置为“固定” - 但仅适用于某些组合。

所以,例如:

.mystyle.blue {
    position: fixed;
}  

所以,.blue是固定的,但普通的.mystyle本身并没有获得相同的造型。

我也有一些jQuery的东西,它添加和删除内联样式。因此,在某些条件下,它可能会将position: fixed添加到所有.mystyle变种中。

这只需使用以下方法完成:

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

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

但是,删除后,将忽略基础样式表设置。所以,我仍然期望.mystyle.blue尊重position: fixed,但事实并非如此。

有关解决方法的任何想法吗?

UPDATE

我现在知道发生了什么,并有一个修复,但这不是我预期应该发生的。

当使用jQuery设置position: fixed时,我也设置了一个顶级位置。这是一个负面的 - -64px(虽然实际上它是动态设置的)。显然,两者都被同时删除。

样式表代码是这样的:

position: fixed;
top: 0;

一旦内联样式样式被删除,我认为这将再次生效 - 一个做,一个不做。

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

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

jquery css
1个回答
0
投票

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

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

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

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

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

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

$('.mystyle').css({position:'static'})
© www.soinside.com 2019 - 2024. All rights reserved.