HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
With jQuery, it is easy to work with the dimensions of elements and browser window
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:
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
The outerWidth()
method returns the width of an element (includes padding and
border).
The outerHeight()
method returns the height of an element (includes padding
and border).
The following example returns the outer-width/height of a specified <div>
element:
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
The outerWidth(true)
method returns the width of an element (includes
padding, border, and margin).
The outerHeight(true)
method returns the height of an element (includes
padding, border, and margin).
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
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);
});
Use jQuery methods to set the height and width of <div> to 500 pixels.
$("div").().();
For a complete overview of all jQuery CSS methods, please go to our jQuery HTML/CSS Reference.