Question

两个小提琴的故事（请在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的外观/行为。该类将从正文中删除，并且正文将恢复为默认值。按预期工作。

The Second Fiddle

$("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，但已删除。为什么会这样？

谢谢！

Answer 1

对于第二个小提琴，当您在noScroll选择器上调用css（）时，它会将这些样式内联应用于具有类noScroll的元素。但是，这些样式不会以命名的css样式保留。

所以代码实际上正在运行。它正在添加一个类noScroll，但没有样式与css中的该类相关联。此外，它正在删除该类，但css()调用中的样式保留，因为它们是内联应用的。

要获得更好的主意，请参阅此fiddle，其中最后手动删除内联样式。

Answer 2

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

用于查找要应用内联样式的元素的选择器不会存储在任何位置。所以jQuery /浏览器可能无法知道在删除类时要删除哪些内联属性。

Answer 3

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

<body class="noScroll">

......这个（你的第一个例子）：

removeClass(...)

...明显被{{1}}函数调用删除。

jQuery添加类的意外行为

3 个答案: