JQuery CSS Add/Remove class names

Source: Internet
Author: User

addclass (Class)-adds the specified class name for each matching element.
Parameter: class-one or more CSS class names to add to the element, separated by a space (String)
Example one:
Add the ' selected ' class to the matched element
HTML Code:
<p>Hello</p>
JQuery Code:
$ ("P"). AddClass ("selected");
Results:
[<p class= "selected" >Hello</p>]
Example two:
Add the selected highlight class to the matched element
HTML Code:
<p>Hello</p>
JQuery Code:
$ ("P"). AddClass ("Selected highlight");
Results:
[<p class= "Selected highlight" >Hello</p>]

AddClass (function (Index, Class))-adds the specified class name for each matching element.

Parameter: function (Index, Class)-This function must return one or more space-delimited class names. Accepts two parameters, the index parameter is the indexed value of the object in this collection, and the class parameter is the original class attribute value of the object. (Function)
Example: adding a different class to Li
HTML Code:
<ul><li>Hello</li><li>Hello</li><li>Hello</li></ul>
JQuery Code:
$ (' ul Li:last '). addclass (function () {
Return ' item-' + $ (This). index ();
});

Removeclass ([class])-Removes all or a specified class from all matching elements.

Parameter: Class (optional)-One or more CSS class names to delete, separated by a space (String)
Example:
Remove the ' selected ' class from the matching element
HTML Code:
<p class= "Selected first" >Hello</p>
JQuery Code:
$ ("P"). Removeclass ("selected");
Results:
[<p class= "first" >Hello</p>]

Delete all classes of matching elements
HTML Code:
<p class= "Selected first" >Hello</p>
JQuery Code:
$ ("P"). Removeclass ();
Results:
[<p>Hello</p>]

Removeclass (function (Index, Class))-Removes all or the specified class from all matching elements.
Parameter: function (Index, Class)-This function must return one or more space-delimited class names. Accepts two parameters, the index parameter is the indexed value of the object in this collection, and the class parameter is the original class attribute value of the object. (Function)
Example:
Removes the last duplicate class from the previous element
JQuery Code:
$ (' Li:last '). Removeclass (function () {
return $ (this). Prev (). attr (' class ');
});

Toggleclass (Class)-Deletes (adds) a class if it exists (does not exist).
Parameter: Class-css class name (String)
Example:
Toggle the ' selected ' class for matching elements
HTML Code:
<p>hello</p><p class= "selected" >hello again</p>
JQuery Code:
$ ("P"). Toggleclass ("selected");
Results:
[<p class= "selected" >HELLO</P>, <p>hello again</p>]

Toggleclass (class, switch)-if the switch switches parameter is true, the corresponding class is added, otherwise it is deleted.
Parameters:
class-CSS class name to toggle (String)
switch-Boolean value used to determine whether an element contains a class (Boolean)
Example:
Add a ' highlight ' class to three clicks per click
HTML Code:
<strong>jquery Code:</strong>
JQuery Code:
var count = 0;
$ ("P"). Click (function () {
$ (this). Toggleclass ("Highlight", count++% 3 = = 0);
});

Toggleclass (function (Index, Class), [switch])-If the switch switches parameter is true, the corresponding class is added, otherwise it is deleted.
Parameters:
Functions (Index, Class)-a function that returns the class name, accepts two parameters, index is the position of the element in the collection, class is the class value of the original element (function)
switch-(optional) Boolean value that determines whether an element contains a class (Boolean)
Example:
To set the class property based on the parent element
JQuery Code:
$ (' Div.foo '). Toggleclass (function () {
if ($ (this). Parent (). is ('. Bar ') {
return ' happy ';
} else {
Return ' sad ';
}
});

JQuery CSS Add/Remove class names

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.