Learning jQuery CSS Methods

jQuery makes CSS changes easier for an entire web page or of a single element out of thousands of elements present on web page. Using JQuery library developers can enhance their websites without worrying about browsers and their versions as long as the browsers have JavaScript enabled.

Other useful jQuery articles:

css() is one of the important method for CSS manipulation. This method has three different syntaxes to perform different tasks.

  • css(name): Return CSS property value
  • css(name,value): Set CSS property and value
  • css({properties}): Set multiple CSS properties and values

Example:

Following is an example which adds font color to the third list item.

<html>
<head>
<title>document title</title>
<script type="text/javascript"
src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("li").eq(2).css("color", "green");
});
</script>
</head>
<body>
<div>
<ul>
<li>list item A</li>
<li>list item B</li>
<li>list item C</li>
</ul>
</div>
</body>
</html>

Multiple CSS Properties:

The syntax of the method,

selector.css( {key1:val1, key2:val2....keyN:valN})

Example:

Following is an example which adds font color as well as background color to the third list item.

<html>
<head>
<title>document title</title>
<script type="text/javascript"
src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("li").eq(2).css({"color":"blue",
"background-color":"red"});
});
</script>
</head>
<body>
<div>
<ul>
<li>list item A</li>
<li>list item B</li>
<li>list item C</li>
</ul>
</div>
</body>
</html>

Setting Element Width and Height Value:

The width(val) and height(val) method can be used to set the width and height respectively of any element.

Example:

Following is a simple example which sets the width of first division element where as rest of the elements have width set by style sheet:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div:first").width(180);
$("div:first").css("background-color", "yellow");
});
</script>
<style>
div{ width:80px; height:60px; float:left; margin:5px;
background:green; cursor:pointer; }
</style>
</head>
<body>
<div></div>
<div>text</div>
<div>text</div>
</body>
</html>

JQuery CSS Methods

Following list has all the methods which you can use to play with CSS properties:

  • addClass(): Adds one or more classes to selected elements
  • css(): Sets or returns one or more style properties for selected elements
  • hasClass(): Checks if any of the selected elements have a specified class
  • height(): Sets or returns the height of selected elements
  • offset(): Sets or returns the position (relative to the document) for selected elements
  • offsetParent(): Returns the first parent element that is positioned
  • position(): Returns the position (relative to the parent element) of the first selected element
  • removeClass(): Removes one or more classes from selected elements
  • scrollLeft(): Sets or returns the horizontal position of the scrollbar for the selected elements
  • scrollTop(): Sets or returns the vertical position of the scrollbar for the selected elements
  • toggleClass(): Toggles between adding/removing one or more classes from selected elements
  • width(): Sets or returns the width of selected elements

In Closing

Hopefully this tutorial makes your life a bit easier when selecting HTML elements with jQuery. Any thoughts? Which jQuery CSS method did we miss?