Home » JavaScript » jQuery » jQuery CSS add/remove Style Example

About Fabio Cimo

Fabio Cimo
Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.

jQuery CSS add/remove Style Example

The aim of this example is to show how you can manipulate CSS, add or remove styling from elements in a dynamic manner, made possible by the famous JS library, jQuery.

Now jQuery offers reliable ways to select elements and apply methods, which basically means that what we want to do, shall be found inside a method, and it is true.

For most of the article, we’ll make use of .css() method, which is our key to all CSS properties that can be applied with just a slightly different syntax inside the brackets. Follow along with simple and then more complex application of CSS manipulations.
 

1. Document Setup

To begin, create a new HTML document and add the following basic syntax inside like so:

<!DOCTYPE html>
<html>
<head>
	<title>jQuery CSS Example</title>
</head>
<body>

<!-- HTML SECTION  -->


<!-- JAVASCRIPT SECTION  -->
<script src="jquery-1.11.3.min.js"></script>

<script type="text/javascript">

</script>

</body>
</html>

Note that the jQuery library is linked locally. If you don’t have the downloaded file, you can find it here.

2. Know the Basics

In this section we’ll consider the most basic syntax and application of the .css(), which is of essential improtance.

2.1 Syntax

The basic syntax of the method is:

1. .css( propertyName ) where the propertyName is of type String and contains a single CSS property.

2. .css( propertyNames ) where the propertyNames is an array of one or more CSS properties.

The method will get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

2.2 A Basic Application

Let us apply the method on a simple case. First, add a text element on HTML, say, for example, a h3:

<!-- HTML SECTION  -->
<h3>I am a basic example</h3>

In the JS section, let’s change the color of the text to blue:

<!-- JAVASCRIPT SECTION  -->
<script type="text/javascript">
    $('h3').css({color: '#2980b9'});
</script>

The result would be pretty straight:
css1

Additionally, we can as many properties as we like to that element separated by a comma, for example:

<!-- JAVASCRIPT SECTION  -->
<script type="text/javascript">
$('h3').css({
    color: '#fff',
    background: '#1abc9c',
    padding: '1em',
    width: '20%'
});
</script>

The result in this case is:
css2

Simple as that, follow this rule when trying to change styles with jQuery: $('jQuery selector').css({"css property name":"css property value"});

3. Styling Cases

3.1 Changing Style on Events

Just like you can change styling as soon as the HTML is ready, you can also choose to do this on specific event listeners. Let’s modify the example above to apply styling on mouseover:

<!-- JAVASCRIPT SECTION  -->
<script type="text/javascript">
$('h3').mouseover(function() {
    $(this).css({
    color: '#fff',
    background: '#1abc9c',
    padding: '1em',
    width: '20%'
    });
});
</script>

css3

3.2 Extend Existing Styles Values

You may wish to just extend a style based upon it’s current value. For example, if an element’s padding-left was 10px then the following code would result in a total padding-left of 25px.

<!-- JAVASCRIPT SECTION  -->
<script type="text/javascript">
$('selector').css( "padding-left", "+=15" );
</script>

3.3 .css() Function Property

As most of you may already know, as of jQuery 1.4, .css() allows us to pass a function as the property value. This is handy for returning current CSS values to determine changes.

<!-- JAVASCRIPT SECTION  -->
<script type="text/javascript">
$('div.example').css('width', function(index) {
  return index * 50;
});
</script>

3.4 Alternative Approach to .css() Method

Well, up until now, we’ve only been focused to the .css() method. However, there is also another useful way to change styles dynamically, and this includes the .addClass and removeClass methods of jQuery. To see how this works, first create two non-existing classes in CSS like so:

.basic {
    font-size: 1.2em;
    font-weight: 300;
    color: #c0392b;
    border: 0.1em solid #ccc;
    width: 25%;
}
.stylish {
    font-size: 1.5em;
    font-weight: 500;
    color: #fff;
    padding: 1.5em;
    background: #8e44ad;
    width: 25%;
}

Now in the HTML section, add a new div element with some text inside:

<div>An Alternative Set of Methods</div>

The idea is to add a class and then remove it or do it in the same time.

CASE 1 – Adding a Class

$('div').addClass('basic');

css4

CASE 2 – Removing a Class and Adding Another

$('div').removeClass('basic').addClass('stylish');

css5

4. Conclusion

The .css() method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways browsers access most of those properties (the getComputedStyle() method in standards-based browsers versus the currentStyle and runtimeStyle properties in Internet Explorer) and the different terms browsers use for certain properties. The trend of changing styles dynamically is taking over the web more and more and this knowledge is a must for web developers and designers.

5. Download

Download
You can download the full source code of this example here: jQuery CSS
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments