JQuery Applying Styles

In addition to selecting elements and attributes via factory function and attr() function, respectively, JQuery can also modify style associated with HTML elements. Applying styles to different elements in JQuery is extremely simple. JQuery contains an addClass function. This function takes class name as the parameter. The styles in this css class are applied to the elements on which the addClass method is called. The following example demonstrates how JQuery modifies styles of html elements.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Remove Class Affect</title>
          <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

      <script>
           
         $(document).ready(function() {

            $("#btn").click(function(){
               $(".circle").addClass("circle2", "slow");
            });
             
              $("#btn2").click(function(){
               $(".circle").removeClass("circle2", "slow");
            });

         });
      </script>
       
       <style>
           .circle{
               width: 200px;
               height: 200px;
               background-color: aqua;
               border-radius: 100%;
               margin: 0 auto;
           }
           
           .circle2{
               width: 100px;
               height: 100px;
               background-color:coral;
               border-radius: 100%;
               margin: 0 auto; 
           }
           
       </style>
       
   </head>
   <body>

 <button id = "btn"> Shrink Circle </button>
       
<button id = "btn2"> Expand Circle </button>

      <div class = "circle">
        
      </div>

   </body>
</html>

Download Code
Run Code

The above html code creates a two column layout with a header at the top. You can see that in the html, there is no class specified for the three div tags. However, the div contains ids. JQuery code selects div elements via these ids. Next, JQuery uses addClass method to add css classes to the corresponding divs. The class “headdiv” is added to the first div, “rightdiv” is added to the div with id “rdiv” and finally “leftdiv” class is added to the div with id “rdiv”.

Removing Styles via Remove Class

JQuery can also removes predefined styles from any element via removeClass function. This function takes class to remove from the element as parameter. Take a look at the following example.

<!DOCTYPE html>
<html>

    <head>
        
         <title>JQuery Applying Styles</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
          $(document).ready(function() {
           
            $("#hdiv").removeClass("headdiv");
            $("#rdiv").removeClass("rightdiv");
            $("#ldiv").removeClass("leftdiv");
         });
      </script>
    <style>
        .headdiv{
            
            height: 30px;
            width: 100%;
            background-color: #333;
        }    
        .leftdiv{
            height: 400px;
            width: 70%;
            float: left;
            background: #ccc;
        }
         .rightdiv{
            height: 400px;
            width: 29%;
            float: right;
            background: #999;
        }
        
    </style>
        
   </head>
	
   <body>
      <div>
        <div id="hdiv" class="headdiv">
          </div>
        <div id="rdiv" class="rightdiv">
          </div>
          <div id="ldiv" class="leftdiv">
          </div>
    
      </div>
   </body>

</html>

Download Code
Run Code

In the above code, three div contains classes which style them as header, left division and right division. However, in the script, JQuery uses removeClass method to remove the css classes from these divs, therefore in the result section, you will see an empty webpage.

<<< JQuery AttributesJQuery Events Handling >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .