jQuery Tutorials
jQuery Introduction
jQuery Get Started
jQuery Syntax
jQuery Selectors
jQuery Events
jQuery Effects
jQuery Hide/Show
jQuery Fade
jQuery Slide
jQuery Animate
jQuery stop()
jQuery Callback
jQuery Chaining
jQuery HTML
jQuery Get
jQuery Set
jQuery Add
jQuery Remove
jQuery CSS Classes
jQuery Traversing
jQuery Traversing
jQuery Ancestors
jQuery Descendants
jQuery Siblings
jQuery Filtering
jQuery AJAX
jQuery AJAX Intro
jQuery Load
jQuery Get/Post
jQuery Misc
jQuery noConflict()
jQuery Filters
Previous
jQuery - Dimensions
With jQuery, it is easy to work with the size of the elements and the browser window.
jQuery Dimension Methods
jQuery has several important methods for working with dimensions:
width()height()innerWidth()innerHeight()innerHeight()outerWidth()outerHeight()
jQuery Dimensions
jQuery width() and height() Methods
Width() method sets or returns the width of an item (excludes folds, borders and margins).
Height() method sets or returns the length of an item (excludes pads, borders and margins).
The following example returns the width and length of the specified <div> feature:
Example
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery innerWidth() and innerHeight() Methods
The innerWidth() method returns the width of the element (including the end).
The innerHeight() method returns the length of the element (including the ending).
The following example returns the internal width / length of the specified <div> feature:
Example
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery outerWidth() and outerHeight() Methods
The outerWidth() method returns the width of the element (including the end and the border).
The outerHeight() method returns the length of an object (includes termination and boundary).
The following example returns the width / length of something
Example
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
The outerWidth(true) method returns the width of the element (including pad, border, and genes).
The outerHeight(true) returns the length of an object (including pads, border, and genes).
Example
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery More width() and height()
The following example returns the width and length of the document (HTML document) and window (browser lookup):
Example
var txt = "";
txt += "Document width/height: " + $(document).width();
txt += "x" + $(document).height() + "\n";
txt += "Window width/height: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
The following example sets the width and length of the specified <div> feature:
Example
$("#div1").width(500).height(500);
});