• jQuery CSS Manipulation

    jQuery CSS Manipulation

    With jQuery CSS Manipulation, it is easy to manipulate the CSS of elements. jQuery has several methods for CSS manipulation. We will look at the following methods:

    1. addClass() – Adds one or more classes to the selected elements
    2. removeClass() – Removes one or more classes from the selected elements
    3. toggleClass() – Toggles between adding/removing classes from the selected elements
    4. css() – Sets or returns the style attribute

    The following stylesheet will be used for all the examples in this article.

    <style type=”text/css”>.imp

    {

    font-weight:bold;

    font-size:large;

    }

    .red

    {

    color:red;

    }

    </style>

    Example of addClass(), removeClass, and toggleClass() Method:

    jQuery CSS Manipulation Example

    jQuery CSS Manipulation Example

    jQuery CSS Manipulation Program Code

    The following example shows how to add, remove, or toggle class attributes to different elements. When adding classes we can allow selecting multiple elements,

    <script type=”text/javascript”>$(document).ready(function(){

    $(“form”).submit(function(event){

    event.preventDefault();

    //Among 3 Submit buttons find the particular

    var btn = $(this).find(“input[type=submit]:focus”);

    // alert(btn.val());

    switch(btn.val())

    {

    case “Add CSS Class”:

    $(“h1,p”).addClass(“red”);

    $(“div”).addClass(“imp”);

    break;

    case “Toggle CSS Class”:

    $(“h1,p”).toggleClass(“red”);

    $(“div”).toggleClass(“imp”);

    break;

    case “Remove CSS Class”:

    $(“h1,p”).removeClass(“red”);

    $(“div”).removeClass(“imp”);

    break;

    }

    });

    });

    </script>

    Appreciate my work :Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on StumbleUponShare on TumblrDigg thisShare on YummlyShare on VKFlattr the authorBuffer this page

Leave a Reply

Your email address will not be published. Required fields are marked *