Computers & ProgrammingFrontend DevelopmentjQuery

jQuery CSS Methods

jQuery provides methods to easily and effectively manipulate CSS related properties of DOM elements. We will take a look at the more common methods in this article.


The methods listed in the following table are commonly used for DOM manipulation.

addClass()Adds the class(es) to the matched elements. Separate the classes with space$(selector).addClass(class)
css()Gets or sets one or more style properties for selected elements$(selector).css({property:value}))
hasClass()Determines if any of the selected elements have a specified class$(selector).hasClass(class)
height()Gets or sets the height of selected elements$(selector).height(value)
innerHeight()Gets or sets the height of selected element including padding, not border$(selector).innerHeight()
innerWidth()Gets or sets the height of selected elements including padding, not border$(selector).innerWidth()
offset()Sets or returns the position (relative to the document) for selected elements$(selector).offset()
outerHeight()Gets or sets the height of selected element including padding and border$(selector).outerHeight()
outerWidth()Gets or sets the height of selected elements including padding and border$(selector).outerWidth()
position()Returns the position relative to the parent element, of the selected element$(selector).position()
removeClass()Removes one or more classes from selected elements$(selector).removeClass(class)
toggleClass()Toggles between adding/removing one or more classes from selected elements$(selector).toggleClass()
width()Sets or returns the width of selected elements$(selector).width(value)

HTML Example

We will use the following HTML for the examples listed below.

<!DOCTYPE html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  // ... jQuery Code ...
<img id="img1" src="go.png" /> ; 
<div id="div1"> <!-- Some Content --> </div>


Click the image button to try the various CSS related methods below. For detailed information about each method, you may want to visit


$("#go").click(function () {


$("#go").click(function () {


$("#go").click(function () {

.height(), or .height(value)

$("#go").click(function () {


$("#go").click(function () {
    $("#div1").text("innerHeight: " + $("#div1").innerHeight());


$("#go").click(function () {
    $("#div1").text("innerWidth: " + $("#div1").innerWidth());


$("#go").click(function () {
$("#div1").text("Left: " + x.left + " Top: " +;


$("#go").click(function () {
    $("#div1").text("outerHeight: " + $("#div1").outerHeight());


$("#go").click(function () {
    $("#div1").text("outerWidth: " + $("#div1").outerWidth());


$("#go").click(function () {
$("#div1").text("Left: " + x.left + " Top: " +;


$("#go").click(function () {


$("#go").click(function () {
    $("#div1").toggleClass("class1 class2");

.width() or width(value)

$("#go").click(function () {

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top