jQuery Dimension Methods
jQuery has several important methods for working with dimensions:
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
The width()
method sets or returns the width of an element (excludes
padding, border and margin).
The height()
method sets or returns the height of an element (excludes padding, border
and margin).
The following example returns the width and height of a specified <div>
element:
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
The innerWidth()
method returns the width of an element (includes padding).
The innerHeight()
method returns the height of an element (includes padding).
The following example returns the inner-width/height of a specified <div>
element:
The following example returns the width and height of the document (the HTML document) and window (the browser viewport):
$("button").click(function(){
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 height of a specified <div>
element:
$("button").click(function(){
$("#div1").width(500).height(500);
});