Javascript jQuery添加类时出现意外行为_Javascript_Jquery_Html_Css

Javascript jQuery添加类时出现意外行为

javascript jquery html css

Javascript jQuery添加类时出现意外行为,javascript,jquery,html,css,Javascript,Jquery,Html,Css,两个小提琴的故事请在JSFIDLE页面加载后使用run按钮，以便更清楚地了解发生了什么非常简单： $("body").addClass("noScroll"); alert($("body").hasClass("noScroll")); $("body").removeClass("noScroll"); alert($("body").hasClass("noScroll")); 使用此css： .noScroll { background-color: pink; po

两个小提琴的故事请在JSFIDLE页面加载后使用run按钮，以便更清楚地了解发生了什么

非常简单：

$("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;
}

我们有一节课。该类将添加到实体中，从而更改实体的外观/行为。该类将从主体中删除，主体将恢复为默认值。按预期工作

这次没有附带的CSS，因为它是由jQuery添加的，但在其他方面与上面的非常类似。工作到一定程度。CSS已应用，但未删除。为什么会这样

谢谢

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

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

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

因此，代码实际上正在工作。它正在添加一个类noScroll，但css中没有样式与该类关联。此外，它正在删除该类，但是css中的样式将保持不变，因为它们是内联应用的

为了获得更好的想法，请参见此处，其中在末尾手动删除内联样式。

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

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

…在这一点上，请给出您的第一个示例：

<body class="noScroll">

…显然已被removeClass删除。。。函数调用。

当使用.css作为setter时，jQuery修改元素的样式属性。-添加这个是因为它解决了我试图做的事情。尽管这样做看起来很复杂，而且可能是个坏主意。这一点现在很明显。谢谢

<body class="noScroll">