JQuery

Overwrite CSS Styles Using addClass In jQuery

In this post we will see how we can overwrite CSS styles using addClass method in jQuery. We have so many options to change the styles of a particular element. We can do it by editing the stylesheet manually. But what if you want to do the same dynamically? If you need to change a CSS property dynamically, I suggest you to read it here. In this post we are applying more CSS rules to the same element. I hope you will like this.

Here I am using jQuery 2.0.2 version, you can use whichever version you like.

Background

Recently I have got a requirement of changing a CSS property of an element which is common for elements. So I wanted to change the CSS property only if my condition becomes true. In this situation I used jQuery addClass to do this requirement. Here I will show you how.

Using the code

First thing you need to do is create a page.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>AddClass JQuery Demo - Sibeesh Passion</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     AddClass JQuery Demo - Sibeesh Passion  
  10. </body>  
  11.   
  12. </html>  
Then you need to include the script needed.
  1. <script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>   
Now you need to write the scripts.
  1. <script>  
  2. $(document).ready(function()  
  3. {  
  4.     setTimeout(function()  
  5.     {  
  6.         $('.first').addClass('second');  
  7.     }, 5000);  
  8. });  
  9. </script>  
We are adding a new CSS style second to a class first. We will add this after five seconds of document ready. So now we need to create the styles.
  1. <style>  
  2. .first {  
  3.     width: 100px;  
  4.     height: 100px;  
  5.     border: 1px solid #ccc;  
  6.     border-radius: 5px;  
  7.     padding: 10px;  
  8.     margin: 10px;  
  9.     box-shadow: 1px 1px 1px #999;  
  10.     font-style: oblique;  
  11.     text-align: center;  
  12.     background: green;  
  13. }  
  14.   
  15. .second {  
  16.     width: 200px;  
  17.     height: 200px;  
  18.     border: 1px solid #ccc;  
  19.     border-radius: 5px;  
  20.     padding: 10px;  
  21.     margin: 10px;  
  22.     box-shadow: 1px 1px 1px #999;  
  23.     background: blue;  
  24.     font-style: oblique;  
  25.     text-align: center;  
  26. }  
  27. </style>  
Now please run your browser, you can see the following output.

run
Now after five seconds, the same element will look as follows.

output

If you look at your browser console, you can see both the styles are applied to the element.

Add class JQuery

That’s all, now we can see the complete code here.

Here I am using setTimeout as my condition, you can use any condition according to your requirement.

Complete Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>AddClass JQuery Demo - Sibeesh Passion</title>  
  6.     <script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>  
  7.     <script>  
  8.     $(document).ready(function()  
  9.     {  
  10.         setTimeout(function()  
  11.         {  
  12.             $('.first').addClass('second');  
  13.         }, 5000);  
  14.     });  
  15.     </script>  
  16.     <style>  
  17.     .first {  
  18.         width: 100px;  
  19.         height: 100px;  
  20.         border: 1px solid #ccc;  
  21.         border-radius: 5px;  
  22.         padding: 10px;  
  23.         margin: 10px;  
  24.         box-shadow: 1px 1px 1px #999;  
  25.         font-style: oblique;  
  26.         text-align: center;  
  27.         background: green;  
  28.     }  
  29.       
  30.     .second {  
  31.         width: 200px;  
  32.         height: 200px;  
  33.         border: 1px solid #ccc;  
  34.         border-radius: 5px;  
  35.         padding: 10px;  
  36.         margin: 10px;  
  37.         box-shadow: 1px 1px 1px #999;  
  38.         background: blue;  
  39.         font-style: oblique;  
  40.         text-align: center;  
  41.     }  
  42.     </style>  
  43. </head>  
  44.   
  45. <body>  
  46.     AddClass JQuery Demo - Sibeesh Passion  
  47.     <div class="first"></div>  
  48. </body>  
  49.   
  50. </html>  
Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to do this requirement? Could you find this post auseful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

If you have any questions, then please mention it in the comments section.

Read this article in my blog here.

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs