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:
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:
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>
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');
CASE 2 – Removing a Class and Adding Another
$('div').removeClass('basic').addClass('stylish');
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
You can download the full source code of this example here: jQuery CSS
