jQuery CSS Method Examples
jQuery CSS is an easy to use method available in jQuery for accessing the style property from the first matched element, in the set of matched elements. Simply put, if you need to assign a new value via CSS, modify an existing CSS value or need to remove the existing CSS values using jQuery, then jQuery .css(); method is for you. In this article, I am going to share with you easy ways of using the .css() method along with relevant examples. Read on to find out more info.
How to use .css() Method in jQuery – Examples
In order to see how to use the .css() method in jQuery, let us consider that we have a div and we are going to apply our CSS styles to it. Lets see by means of a simple example, how to do this in different ways. But first, feel free to try the demo. Following the demo, will be the source code followed by specific examples.
Using .css() method in jQuery to access and manipulate the styles of an element
Here’s the HTML + basic jQuery required to get started with our examples:
(Please note that jQuery v.>= 1.7 is required to run the demo using .on() method in jQuery)
<html>
<head>
<title>jQuery .css(); Method Examples</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.red {
border: 1px solid #FF0000;
margin: 10px;
}
.green {
background-color: #CEFFCE;
margin: 10px;
}
</style>
</head>
<body>
<div class="divs_container">
<div id="mydiv1" class="red">
This is my 1 div
</div>
</div>
<input type="button" name="sbt_get_class" id="sbt_get_class" value="Get Class">
<input type="button" name="sbt_set_class" id="sbt_set_class" value="Set/ReplaceWith Green Class">
<input type="button" name="sbt_remove_class" id="sbt_remove_class" value="Remove Class">
<br>
<input type="button" name="sbt_add_red_class" id="sbt_add_red_class" value="Add Red Class">
<input type="button" name="sbt_add_green_class" id="sbt_add_green_class" value="Add Green Class with Red Class">
<input type="button" name="sbt_remove_red_class" id="sbt_remove_red_class" value="Remove Red Class">
<br>
<input type="button" name="sbt_add_purple_bg" id="sbt_add_purple_bg" value="Add Purple Background">
<input type="button" name="sbt_add_multiple_css" id="sbt_add_multiple_css" value="Add Multiple CSS">
<input type="button" name="sbt_chain_css_styles" id="sbt_chain_css_styles" value="Chain CSS styles">
<br>
<input type="button" name="sbt_reset" id="sbt_reset" value="Reset everything">
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var divs_container_html = $(".divs_container").html();
});
</script>
</body>
</html>Following is the jQuery code for the examples:
Example #1 – Alert the current class of the div using the .css() method in jQuery
$('#sbt_get_class').on("click", function(){
alert( $('#mydiv1').attr('class') );
});Example #2 – Assign/Set/Replace Class for a div using the .css() method in jQuery
$('#sbt_set_class').on("click", function(){
$('#mydiv1').attr('class', 'green');
});Examples #3 – Remove existing/all classes of a div using the .css() method
$('#sbt_remove_class').on("click", function(){
$('#mydiv1').removeClass();
});Example #4 – Add a single class to a div using the jQuery .css() method
$('#sbt_add_red_class').on("click", function(){
$('#mydiv1').attr('class', 'red');
});Example #5 – Append a single new class to an existing class of a div using css() method
$('#sbt_add_green_class').on("click", function(){
$('#mydiv1').addClass('green');
});Example #6 – Remove a specific single class from a list of all applied classes using .css() method in jQuery
$('#sbt_remove_red_class').on("click", function(){
$('#mydiv1').removeClass('red');
});Example #7 – Add Class by specifying CSS style directly using jQuery CSS
$('#sbt_add_purple_bg').on("click", function(){
$('#mydiv1').css("background-color","purple");
});Example #8 – Add new css styles using the .css() method in jQuery (If any of the style is already present on the target div, it will be overwritten with the new style).
$('#sbt_add_multiple_css').on("click", function(){
$('#mydiv1').css({"background-color":"#CEFFCE", "font-size":"20px", "font-color":"#000", "font-weight":"bold"});
});Example #9 – Add CSS styles via “chaining” using .css() method of jQuery
$('#sbt_chain_css_styles').on("click", function(){
$('#mydiv1').css("background-color", "#0099FF")
.css("font-size", "40px")
.css("font-color", "#FFF")
.css("font-weight", "normal")
.css("border", "10px solid #06C");
});Example #10 – Reset the divs back to their original state using the .css() method
$('#sbt_reset').on("click", function(){
$(".divs_container").html(divs_container_html);
});Easy so far? You can build up on the other CSS properties using the methodology as described above.
That’s it for this article!
Do you know of any other ways to use the jQuery css method? Feel free to suggest by commenting below.