【问题标题】: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;    
        }
        

        【讨论】:

          猜你喜欢
          • 2013-10-26
          • 2017-10-02
          • 2021-06-06
          • 2017-02-15
          • 2023-03-14
          • 1970-01-01
          • 2015-09-16
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多