如何添加和删除css类答案

【问题标题】：how to add and remove css class如何添加和删除css类
【发布时间】：2011-01-11 08:51:26
【问题描述】：

如何移除 CSS 默认类

这是我的 div

<div id="messageContainer">

这是我的 CSS 类

#messageContainer{  
  height:26px;  
  color:#FFFFFF;    
  BACKGROUND-COLOR: #6af; 
  VERTICAL-ALIGN: middle;
  TEXT-ALIGN: center;
  PADDING-TOP:6px;  
}

我想删除默认类和新的 css 类

请帮忙；

【问题讨论】：

+1..因为它对我来说是新的..而且很简单

标签： jquery

【解决方案1】：

你不是在处理一个班级。您已将默认规则应用于 ID 元素。因此，您实际上应该只需要添加新类：

$("#messageContainer").addClass("newRules");

任何未被覆盖的规则都可以用css() 方法覆盖：

$("#messageContainer").css({
  'font-weight':'bold',
  'color':'#990000'
}).addClass("newRules");

【讨论】：

应该是addClass("newRules"); - 没有点。
谢谢@Kobi。在编写类名时，我似乎总是最初使用选择器语法:(

【解决方案2】：

您可以通过两种方式处理它。一，使用两个类并将它们相互交换：

.red { background: red }
.green { background: green }

然后在 jQuery 中：

$("#messageContainer").attr('class','green'); // switch to green
$("#messageContainer").attr('class','red'); // switch to red

或者您可以使用 CSS 顺序来切换单个类：

#messageContainer { background: red }
#messageContainer.green { background: green }

然后：

$("#messageContainer").toggleClass("green");

这将在每次调用时交替背景。

【讨论】：

【解决方案3】：

您没有在示例中定义 css 类，而是使用 id 选择器。

要使用一个类，你的代码应该是这样的：

<div id="messageContainer" class="messageContainer"></div>

在您的样式表或样式标签之间，您将拥有

.messageContainer{  
  height:26px;  
  color:#FFFFFF;    
  BACKGROUND-COLOR: #6af; 
  VERTICAL-ALIGN: middle;
  TEXT-ALIGN: center;
  PADDING-TOP:6px;  
}

然后，使用 jquery 你可以删除这个类

$('#messageContainer').removeClass('messageContainer');

【讨论】：

【解决方案4】：

对于 IE10 及更高版本，请使用以下方法：

// adds class "foo" to el
el.classList.add("foo");

// removes class "foo" from el
el.classList.remove("foo");

// toggles the class "foo"
el.classList.toggle("foo");

【讨论】：

【解决方案5】：

尝试在您的 css 类定义之前添加一个句点。

使用上面的示例，您应该使用：

.messageContainer{
height:26px;    
color:#FFFFFF;  
BACKGROUND-COLOR: #6af; 
VERTICAL-ALIGN: middle;
TEXT-ALIGN: center;
PADDING-TOP:6px;    
}

【讨论】：