jQuery provides css() method to manipulate CSS properties of the matched elements.
JQuery css() method does not modify the content of the jQuery object but they are used to get and set CSS properties on DOM elements.
jQuery – Get CSS Properties
jQuery css() method can be used to get the value of a CSS property associated with the first matched HTML element. Following is the syntax of the css() method:
$(selector).css(propertyName);
jQuery understands and returns the correct value for both css( “background-color” ) and css( “backgroundColor” ).
Example
Let’s try the following example and verify the result. This should return the background color of the first matched <div>.
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("button").click(function(){alert("Background color = "+$("div").css("background-color"));});});</script><style>
button{margin:10px;width:150px;cursor:pointer}
div{ margin:10px;padding:12px; width:125px;}</style></head><body><p>Click the below button to see the result:</p><div style="background-color:#9c9cff;">Blue</div><div style="background-color:#93ff93;">Green</div><button>Get CSS Property</button></body></html>
jQuery – Set CSS Properties
jQuery css() method can be used to set the value of one or more CSS properties associated with the matched HTML element. Following is the syntax of the css() method:
$(selector).css(propertyName, value);
Here both the parameters are required, propertyName represents a CSS property name where as value represents a valid value of the property.
Example
Let’s try the following example and verify the result. Here we will take the color of the first matched <div> and will change the text color of all <p> using the div background-color.
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("button").click(function(){var color =$("div").css("background-color");$("p").css("color", color);});});</script><style>
button{margin:10px;width:150px;cursor:pointer}
div{ margin:10px;padding:12px; width:125px;}</style></head><body><p>Click the below button to see the result:</p><div style="background-color:#9c9cff;">Blue</div><div style="background-color:#93ff93;">Green</div><button>Set CSS Property</button></body></html>
jQuery – Set Multiple CSS Properties
You can apply multiple CSS properties on the matched elements using a single jQuery method css(). You can apply as many properties as you like in a single call.
Following is the syntax of the css() method to set multiple CSS properties:
Let’s try the following example and verify the result. Here we will set background color of all the <div> to “#fb7c7c;” and font-size to 25px.
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("button").click(function(){$("div").css({"background-color":"#fb7c7c","font-size":"25px"});});});</script><style>
button{margin:10px;width:150px;cursor:pointer}
div{ margin:10px;padding:12px; width:125px;}</style></head><body><p>Click the below button to see the result:</p><div style="background-color:#9c9cff;">Blue</div><div style="background-color:#93ff93;">Green</div><button>Set CSS Property</button></body></html>
jQuery HTML/CSS Reference
You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery HTML/CSS Reference.
jQuery provides various methods to get and set the CSS dimensions for the various properties. Following diagram explains how various dimensions (width, height, innerWidth, innerHeight, outerWidth, outerHeight) can be depicted for any HTML element:
jQuery Dimension Methods
Following are the methods to manipulate CSS dimensions for the various properties of the HTML elements.
width() – This method gets or sets the width of an element
height() – This method gets or sets the height of an element
innerWidth() – This method gets or sets the inner width of an element.
innerHeight() – This method gets or sets the inner height of an element.
outerWidth() – This method gets or sets the outer width of an element.
outerHeight() This method gets or sets the outer height of an element.
jQuery width() Method
jQuery width() method gets the width for the first matched element or set the width of every matched element(s).
$(selector).width([val]);
We can use width() method with or without val parameter. If we do not provide a parameter to this method then it will return the width of the first matched element but if we provide a value as the parameter then it will set the width of all the matched elements.
Example
Let’s try the following example to get and set the width of a <div> element.
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("#b1").click(function(){alert("Box width = "+$("div").width());});$("#b2").click(function(){$("div").width("400px");});});</script><style>
button{margin:10px;cursor:pointer}
div{ margin:10px;padding:12px; width:140px;}</style></head><body><p>Click the below buttons to see the result:</p><div style="background-color:#93ff93;">Box</div><button id="b1">Get width</button><button id="b2">Set width</button></body></html>
jQuery height() Method
jQuery height() method gets the height for the first matched element or set the width of every matched element(s).
$(selector).height([val]);
We can use height() method with or without val parameter. If we do not provide a parameter to this method then it will return the height of the first matched element but if we provide a value as the parameter then it will set the height of all the matched elements.
Example
Let’s try the following example to get and set the height of a <div> element.
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("#b1").click(function(){alert("Box height = "+$("div").height());});$("#b2").click(function(){$("div").height("100px");});});</script><style>
button{margin:10px;cursor:pointer}
div{ margin:10px;padding:12px; width:155px;}</style></head><body><p>Click the below buttons to see the result:</p><div style="background-color:#93ff93;">Box</div><button id="b1">Get height</button><button id="b2">Set height</button></body></html>
jQuery innerWidth() Method
jQuery innerWidth() method gets the innerWidth for the first matched element or set the innerWidth of every matched element(s).
$(selector).innerWidth([val]);
We can use innerWidth() method with or without val parameter. If we do not provide a parameter to this method then it will return the innerWidth of the first matched element but if we provide a value as the parameter then it will set the innerWidth of all the matched elements.
Example
Let’s try the following example to get and set the innerWidth of a <div> element.
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("#b1").click(function(){alert("Box innerWidth = "+$("div").innerWidth());});$("#b2").click(function(){$("div").innerWidth("400px");});});</script><style>
button{margin:10px;cursor:pointer}
div{ margin:10px;padding:12px; width:140px;}</style></head><body><p>Click the below buttons to see the result:</p><div style="background-color:#93ff93;">Box</div><button id="b1">Get width</button><button id="b2">Set width</button></body></html>
jQuery innerHeight() Method
jQuery innerHeight() method gets the innerHeight for the first matched element or set the innerHeight of every matched element(s).
$(selector).innerHeight([val]);
We can use innerHeight() method with or without val parameter. If we do not provide a parameter to this method then it will return the innerHeight of the first matched element but if we provide a value as the parameter then it will set the innerHeight of all the matched elements.
Example
Let’s try the following example to get and set the innerHeight of a <div> element.
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("#b1").click(function(){alert("Box innerHeight = "+$("div").innerHeight());});$("#b2").click(function(){$("div").innerHeight("100px");});});</script><style>
button{margin:10px;cursor:pointer}
div{ margin:10px;padding:12px; width:155px;}</style></head><body><p>Click the below buttons to see the result:</p><div style="background-color:#93ff93;">Box</div><button id="b1">Get height</button><button id="b2">Set height</button></body></html>
jQuery outerWidth() Method
jQuery outerWidth() method gets the outerWidth for the first matched element or set the outerWidth of every matched element(s).
$(selector).outerWidth([val]);
We can use outerWidth() method with or without val parameter. If we do not provide a parameter to this method then it will return the outerWidth of the first matched element but if we provide a value as the parameter then it will set the outerWidth of all the matched elements.
Example
Let’s try the following example to get and set the outerWidth of a <div> element.
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("#b1").click(function(){alert("Box outerWidth = "+$("div").outerWidth());});$("#b2").click(function(){$("div").outerWidth("400px");});});</script><style>
button{margin:10px;cursor:pointer}
div{ margin:10px;padding:12px; width:140px;}</style></head><body><p>Click the below buttons to see the result:</p><div style="background-color:#93ff93;">Box</div><button id="b1">Get width</button><button id="b2">Set width</button></body></html>
jQuery outerHeight() Method
jQuery outerHeight() method gets the outerHeight for the first matched element or set the outerHeight of every matched element(s).
$(selector).outerHeight([val]);
We can use outerHeight() method with or without val parameter. If we do not provide a parameter to this method then it will return the outerHeight of the first matched element but if we provide a value as the parameter then it will set the outerHeight of all the matched elements.
Example
Let’s try the following example to get and set the outerHeight of a <div> element.
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("#b1").click(function(){alert("Box outerHeight = "+$("div").outerHeight());});$("#b2").click(function(){$("div").outerHeight("100px");});});</script><style>
button{margin:10px;cursor:pointer}
div{ margin:10px;padding:12px; width:155px;}</style></head><body><p>Click the below buttons to see the result:</p><div style="background-color:#93ff93;">Box</div><button id="b1">Get height</button><button id="b2">Set height</button></body></html>
jQuery HTML/CSS Reference
You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery HTML/CSS Reference.
jQuery provides three methods addClass(), removeClass() and toggleClass() to manipulate CSS classes of the elements.
We have divided our CSS manipulation discussion into two parts. This chapter will discuss about manipulating CSS classes and the next chapter will discuss about manipulating CSS properties.
jQuery – Adding CSS Classes
jQuery provides addClass() method to add a CSS class to the matched HTML element(s). Following is the syntax of the addClass() method:
$(selector).addClass(className);
This method takes a parameter which is one or more space-separated classes to be added to the class attribute of each matched element. More than one class may be added at a time, separated by a space, to the set of matched elements, like so:
$(selector).addClass("Class1 Class2");
Synopsis
Consider the following HTML content with CSS classes defined:
Please note that addClass() method does not replace an existing class, rather it simply adds the class, appending it to any which may already be assigned to the elements.
Example
Let’s try the following example and verify the result:
jQuery provides removeClass() method to remove an existing CSS class from the matched HTML element(s). Following is the syntax of the removeClass() method:
$(selector).removeClass(className);
This method takes a parameter which is one or more space-separated classes to be removed from the class attribute of each matched element. More than one class may be removed at a time, separated by a space, from the set of matched elements, like so:
$(selector).removeClass("Class1 Class2");
Synopsis
Consider the following HTML content with CSS classes defined:
jQuery provides toggleClass() method to toggle an CSS class on the matched HTML element(s). Following is the syntax of the toggleClass() method:
$(selector).toggleClass(className);
This method takes a parameter which is one or more space-separated classes to be toggled. If an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.
Example
Let’s try the following example and verify the result:
