Question

如何删除CSS默认类

这是我的div

<div id="messageContainer">

这是我的CSS课程

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

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

请帮助;

Answer 1

你不是在和一个班级打交道。您具有应用于ID元素的默认规则。因此，您实际上只需要添加新类：

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

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

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

Answer 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");

每次调用时都会交替背景。

Answer 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');

Answer 4

尝试在css类定义之前添加句点。

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

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

Answer 5

对于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");

如何添加和删除css类

5 个答案: