jQuery CSS Methods

Saturday, July 14, 2012

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.


Methods

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


MethodDescriptionSyntax
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>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // ... jQuery Code ...
});
</script>
</head>
<body>
<img id="img1" src="go.png" /> ; 
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>


Examples

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


 $("#go").click(function () {
        $("#div1").addClass("newClass");
   });


go arrow
.addClass()


 $("#go").click(function () {
        $("#div1").css({"color":"red","font-size":"2em"});
   });


go arrow
.css()


 $("#go").click(function () {
        $("#div1").html($("#div1").hasClass("newClass"));
   });


go arrow
.hasClass()


 $("#go").click(function () {
        $("#div1").height(96);
   });


go arrow
.height(), or .height(value)


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


go arrow
.innerHeight()


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


go arrow
.innerWidth()


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


go arrow
.offset()


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


go arrow
.outerHeight()


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


go arrow
.outerWidth()


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


go arrow
.position()


 $("#go").click(function () {
        $("#div1").removeClass("newClass");
   });


go arrow
.removeClass()


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


go arrow
.toggleClass()


 $("#go").click(function () {
        $("#div1").width(500);
   });


go arrow
.width() or width(value)


Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

Pro jQuery JavaScript and jQuery: The Missing Manual Professional jQuery