jQuery-CSS classes and methods

jQuery - Get and set CSS classes

jQuery Manipulating CSS

jQuery Has several methods for performing CSS operations. We will study the following:

addClass() - Add one or more classes to the selected element

removeClass() - Remove one or more classes from the selected element

toggleClass() - Add/delete class switching operation for the selected element

css() - Set or return the style attribute

Instance style sheet

The following The style sheet will be used for all examples on this page:

.important{ font-weight:bold; font-size:xx-large; }. blue{ color:blue; }

jQuery addClass() method

The following examples show how to add the class attribute to different elements. Of course, when adding a class, you can also select multiple elements:

       
  
静夜思
 
床前明月光
 
疑是地上霜
 
这是另外一个段落。
 
这是一些重要的文本!
 
 为元素添加 class  

You can also specify multiple classes in the addClass() method:

     
  
我会变哦
 
为什么我不行呢
 
 为第一个 div 元素添加类  

jQuery removeClass() Method

The following example demonstrates how to delete the specified class attribute in different elements:

       
  
静夜思
 
床前明月光
 
疑是地上霜
 
这是另外一个段落。
 
这是一些重要的文本!
 
 从元素中移除 class  

The effect of addclass is exactly the opposite.

jQuery toggleClass() method

Attribute switching function:

       
  
标题 1
 
标题 2
 
这是一个段落。
 
这是另外一个段落。
 
 切换 class  

jQuery css() method

css() method setting Or returns one or more style properties of the selected element.

Return CSS properties

To return the value of the specified CSS property, please use the following syntax:

css("propertyname");

Set CSS properties

To set the specified CSS properties, please use the following syntax:

css("propertyname","value");

Set multiple CSS properties

If you need to set multiple CSS properties, please use the following syntax:

css({"propertyname":" value","propertyname":"value",...});

      
  
这是一个标题
 
这是一个例子
 
这是一个例子
 
这是一个例子
 
这是一个例子
 为 p 元素设置多个样式