jQuery 添加的类的意外行为答案

【问题标题】：Unexpected behavior with class added by jQueryjQuery 添加的类的意外行为
【发布时间】：2015-05-14 22:37:17
【问题描述】：

两个小提琴的故事（请在 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 已应用，但未删除。为什么会这样？

谢谢！

【问题讨论】：

"When using .css() as a setter, jQuery modifies the element's style property." -- jQuery .css()
添加这个是因为它解决了我想要做的事情。虽然这样做看起来很复杂，而且可能是个坏主意。 link

标签： javascript jquery html css

【解决方案1】：

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

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

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

【讨论】：

现在很明显了。谢谢。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

<body class="noScroll">

...这显然被removeClass(...) 函数调用删除了。

【讨论】：