文章/答案/技术大牛

发布

社区首页 >问答首页 >使用jQuery添加的类的意外行为

问使用jQuery添加的类的意外行为
EN

Stack Overflow用户

提问于 2015-05-14 22:37:17

回答 3查看 88关注 0票数 0

两个小提琴的故事(请使用运行按钮后，jsfiddle页面加载，以更清楚地了解正在发生的事情)。

第一场比赛

简单至极：

$("body").addClass("noScroll");
alert($("body").hasClass("noScroll"));
$("body").removeClass("noScroll");
alert($("body").hasClass("noScroll"));

使用此css：

.noScroll {
    background-color: pink;
    position: fixed;
    width: 100%;
    top: 200px;
}

我们有课。类被添加到body中，从而改变身体的外观/行为。类从主体中移除，主体恢复为默认值。按预期工作。

第二场比赛

$("body").addClass("noScroll");
alert($("body").hasClass("noScroll"));
$(".noScroll").css({
    "background-color" : "pink",
    "position"  : "fixed",
    "width"     : "100%",
    "top"       : "200px"
});
$("body").removeClass("noScroll");
alert($("body").hasClass("noScroll"));

这次没有随附的CSS，因为它是由jQuery添加的，但在其他方面与上面的非常相似。工作到了一定程度。CSS是被应用的，但是它没有被删除。为什么会发生这种情况？

谢谢!

javascript

jquery

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-05-14 22:43:03

对于二把手，当您在noScroll选择器上调用css()时，它将这些样式内联地应用到类noScroll的元素中。但是，这些样式不会在命名的css样式中保留。

所以代码实际上起作用了。它正在添加一个类noScroll，但是在css中没有与该类关联的样式。另外，它正在移除该类，但是css()调用中的样式保留下来，因为它们是内联应用的。

要获得更好的想法，请参见这个小提琴，在这个小提琴中，内联样式在末尾被手动删除。

票数 8

Stack Overflow用户

发布于 2015-05-14 22:42:54

内联样式和CSS类是两个不同的概念。添加和删除一个不能添加或移除另一个。内联样式仅覆盖通过类应用的样式。

用于查找要应用内联样式的元素的选择器不会存储在任何地方。因此，当您删除类时，jQuery/浏览器不可能知道要删除哪些内联属性。

票数 3

Stack Overflow用户

发布于 2015-05-14 22:43:51

您已经在第二个示例中应用了内联CSS。这相当于这样做：

<body style="background-color:pink; position:fixed; width:100%; top:200px;">

...over此(第一个示例)：

<body class="noScroll">

...which显然是通过removeClass(...)函数调用删除的。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30248619

复制

相似问题

问使用jQuery添加的类的意外行为
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery添加的类的意外行为EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery添加的类的意外行为
EN