DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • CSS3 Transitions vs. jQuery Animate: Performance
  • Demystifying the ‘Class’ Attribute in HTML: A Comprehensive Guide With Examples
  • jQuery vs. Angular: Common Differences You Must Know
  • Introduction To Template-Based Email Design With Spring Boot

Trending

  • Supercharge Your Communication With Twilio and Ballerina
  • Resistance to Agile Transformations
  • The Systemic Process of Debugging
  • Setting up Request Rate Limiting With NGINX Ingress
  1. DZone
  2. Coding
  3. Frameworks
  4. Overwrite CSS Styles Using addClass In jQuery

Overwrite CSS Styles Using addClass In jQuery

A step-by-step guide with code samples to overwrite CSS styles dynamically with jQuery

Sibeesh Venu user avatar by
Sibeesh Venu
·
Oct. 21, 15 · Tutorial
Like (9)
Save
Tweet
Share
17.63K Views

Join the DZone community and get the full member experience.

Join For Free

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

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

Background

Recently I was required to change a CSS property of an element which is common for element. I wanted to change the CSS property only if my condition becomes true. In this situation, I used jQuery addClass to do this requirement. 

Using the Code

First thing you need to do is create a page.

<!DOCTYPE html>
<html>
<head>
    <title>AddClass JQuery Demo - Sibeesh Passion</title>
</head>
<body>
   AddClass JQuery Demo - Sibeesh Passion
</body>
</html>

Then you need to include the required script.

<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>

Next you need to write the scripts.

<script>
        $(document).ready(function () {
            setTimeout(function () {
$('.first').addClass('second');
}, 5000);
        });

</script>

We are adding a new CSS style second to a class first. We will add this after five seconds of the document being ready. So now we need to create the styles, right?

<style>
        .first {
            width: 100px;
    height: 100px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            box-shadow: 1px 1px 1px #999;
            font-style: oblique;
            text-align: center;
background:green;
        }
.second {
            width: 200px;
    height: 200px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            box-shadow: 1px 1px 1px #999;
            background: blue;
            font-style: oblique;
            text-align: center;
        }
    </style>

When you run your browser, you can see the following output.

Image title

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

Image title

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

Image title


Now we can see the complete code here.

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

Complete Code

<!DOCTYPE html>
<html>
<head>
    <title>AddClass JQuery Demo - Sibeesh Passion</title>
    <script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
    <script>
        $(document).ready(function () {
            setTimeout(function () {
$('.first').addClass('second');
}, 5000);
        });
    </script>
    <style>
        .first {
            width: 100px;
height: 100px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            box-shadow: 1px 1px 1px #999;
            font-style: oblique;
            text-align: center;
background:green;
        }
.second {
            width: 200px;
height: 200px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            box-shadow: 1px 1px 1px #999;
            background: blue;
            font-style: oblique;
            text-align: center;
        }
    </style>
</head>
<body>
    AddClass JQuery Demo - Sibeesh Passion
<div class="first"></div>
</body>
</html>
CSS JQuery

Published at DZone with permission of Sibeesh Venu, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • CSS3 Transitions vs. jQuery Animate: Performance
  • Demystifying the ‘Class’ Attribute in HTML: A Comprehensive Guide With Examples
  • jQuery vs. Angular: Common Differences You Must Know
  • Introduction To Template-Based Email Design With Spring Boot

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: