Did you find this useful?
Socialize it today.


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)


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

JavaScript and jQuery: The Missing Manual HTML CSS and JavaScript Editor Professional jQuery