Quick Contact

    jQuery Add and Remove CSS Classes

    jQuery CSS Classes Manipulation

    To modify the CSS classes designated to HTML elements, jQuery offers a number of methods, including addClass(), removeClass(), toggleClass(), etc.

    jQuery addClass() Method

    The selected elements receive one or more classes after using the jQueryaddClass() method.

    The class will be added in the example that follows:

    • page-header to the class and < h1>.
    • The < p> elements are highlighted with style.
    • a button-click hint.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Adding a Class to the Elements in jQuery< /title>
    < style>
        .page-header{
    color: red;
    text-transform: uppercase;
        }
        .highlight{
    background: yellow;
        }
    	.hint{
    font-style: italic;
        }        
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
            $("h1").addClass("page-header");
            $("p.hint").addClass("highlight");
        });
    });
    < /script>
    < /head>
    < body>
    < h1>Demo Text< /h1>
    < p>Loremipsum dolor sit amet, consecteturadipiscingelit...< /p>
    < p class="hint">< strong>Tip:< /strong>LoremIpsum is dummy text.< /p>
    < button type="button">Add Class< /button>
    < /body>
    < /html>
    

    The components can also have multiple classes added to them simultaneously. In the addClass() method, simply enter a space-separated list of classes as follows:

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Adding multiple Classes to the Elements in jQuery< /title>
    < style>
        .page-header{
    color: red;
    text-transform: uppercase;
        }
        .highlight{
    background: yellow;
        }
    	.hint{
    font-style: italic;
        }         
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
            $("h1").addClass("page-header highlight");
        });
    });
    < /script>
    < /head>
    < body>
    < h1>Hello World< /h1>
    < p>The quick brown fox jumps over the lazy dog.< /p>
    < button type="button">Add Class< /button>
    < /body>
    < /html>
    

    jQuery removeClass() Method

    The jQueryremoveClass() method can be used to similarly eliminate the classes from of the components. A single class, a number of classes, or all the classes can be eliminated from the selected elements simultaneously using the removeClass() method.

    The class.page-header will be removed from the < h1> and the < p> elements, respectively, on button click in the example below.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Removing Classes from the Elements in jQuery< /title>
    < style>
        .page-header{
    color: red;
    text-transform: uppercase;
        }
        .highlight{
    background: yellow;
        }
    	.hint{
    font-style: italic;
        } 
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
            $("h1").removeClass("page-header");
            $("p").removeClass("hint highlight");
        });
    });
    < /script>
    < /head>
    < body>
    < h1 class="page-header">Demo Text< /h1>
    < p>Loremipsum dolor sit amet, consecteturadipiscingelit...< /p>
    < p class="hint highlight">< strong>Tip:< /strong>LoremIpsum is dummy text.< /p>
    < button type="button">Remove Class< /button>
    < /body>
    < /html>
    

    Without even any arguments, the removeClass() method will disable all classes from of the individual elements.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Removing All the Classes from the Elements in jQuery< /title>
    < style>
        .page-header{
    color: red;
    text-transform: uppercase;
        }
        .highlight{
    background: yellow;
        }
    	.hint{
    font-style: italic;
        }      
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
            $("h1").removeClass();
            $("p").removeClass();
        });
    });
    < /script>
    < /head>
    < body>
    < h1 class="page-header">Demo Text< /h1>
    < p>Loremipsum dolor sit amet, consecteturadipiscingelit...< /p>
    < p class="hint highlight">< strong>Tip:< /strong>LoremIpsum is dummy text.< /p>
    < button type="button">Remove Class< /button>
    < /body>
    < /html>
    

    jQuery toggleClass() Method

    The jQuerytoggleClass() function adds or removes one or more courses from the various components in such a way that when an element seems to have the class, it is removed; otherwise, it adds the class, i.e. toggle classes.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Toggle the Classes of the Elements in jQuery< /title>
    < style>
    p{
    padding: 10px;
    cursor: pointer;        
    font: bold 16px sans-serif;
        }
        .highlight{
    background: yellow;
        }         
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("p").click(function(){
            $(this).toggleClass("highlight");
        });
    });
    < /script>
    < /head>
    < body>
    < p>Click on me to toggle highlighting.< /p>
    < p class="highlight">Click on me to toggle highlighting.< /p>
    < p>Click on me to toggle highlighting.< /p>
    < /body>
    < /html>
    

    FAQS

    Q1. What is addClass and removeClass in jQuery?

    The selected elements receive one or more class names when using the addClass() procedure. This procedure only adds one or maybe more classifications to the class attribute; it will not eliminate any existing class attributes. Tip: Use spaces between class names to add upwards of one class.

    Q2. How do you add and remove CSS classes to an element using jQuery?

    Adds one or more classes to the selected elements using the addClass() method. remove Removes one or more classes from the chosen elements using the class() function. toggleClass() – Changes whether classes are added to or removed from the selected elements.

    Q3. How to remove all CSS from a class?

    Using the removeClass() method, we can remove all CSS classes from an attribute. The selected attribute can have one or more class names removed using the removeClass() method.

    Q4. How do you add and remove a class on click?

    The jQuerytoggleClass() function adds or removes one or more classes from the selected elements in such a way that if an element already has the class, it is removed; otherwise, it adds the class, i.e. toggle classes.

    Q5. How to apply multiple CSS styles on a single element?

    By separating each CSS property or value pair inside the style attribute with a semicolon, users can implement multiple parameter or value pairs to style the element. Inline CSS styles should only be used sparingly since they combine HTML-marked information with CSS-based presentation.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.