JQuery - Dynamically Add or Remove CSS

In this blog, we will discuss about add or remove CSS class by JQuery and you can easily apply or remove CSS style class on DOM element dynamically.

JQuery provides several methods for CSS class manipulation:

·         addClass()

·         removeClass()

·         toggleClass()

·         css()

CSS Class

.hideDom

        {

            display: block;    

        }

Add CSS:

You have several way to add CSS class or apply CSS property on element.

addClass() :  the addClass() method add the CSS class on the selected DOM element.

Syntax:

  $('jQuery selector'). addClass ({"css class name"});

Example: hide ddlEmployee dropdown element

$('#ddlEmployee').addClass(".hideDom")

css() : the css() method set CSS style class on the selected DOM element

Syntax:

$('jQuery selector').css({"css property name":"css property value"});

Example: Change Paragraph text color to blue

$('p').css({"color":"blue"});

Remove CSS:

You have several way to remove the applied CSS class or CSS property from element.

removeClass() :  the removeClass() method remove the CSS class from the selected DOM element.

Syntax:

  $('jQuery selector'). removeClass ({"css class name"});

Example:

$('#ddlEmployee').removeClass(".hideDom")

css() : the css() method set blank value applied CSS property

Syntax:

$('jQuery selector').css({"css property name":"css property value"});

Remove the CSS style property ‘Color’ from DOM element

$('p').css({"color":""})

Thanks for visiting!!