jQuery Dimensions

With jQuery, it is easy to handle the size of elements and browser windows.

jQuery provides effective methods for operating element sizes.

In this chapter, we will explain how to get or set the size of HTML elements.

jQuery size methods

We have the following jQuery methods for handling size:

• width()

• height()

• innerWidth()

• innerHeight()

• outerWidth()

• outerHeight()

Below, we will show you how to use each method.

Understand jQuery size

Please see the following figure to understand how these methods calculate the size of the element box.

jQuery width() and height() methods

jQuery width()Method to get or set the width of the selected element (excluding padding, border, and margin).

jQuery height()Method to get or set the height of the selected element (excluding padding, border, and margin).

The following example retrieves the width and height of a DIV element:

$("div").click(function(){
　　let w = $(this).width();
　　let h = $(this).height();
　　$("this").html("DIV width: "　+　w　+　"<br>"　+　"DIV height: "　+　h);
});

The following example sets the width and height of all paragraphs:

$("button").click(function(){
　　$("p").width(250);
　　$("p").height(100);
});

jQuery innerWidth() and innerHeight() methods

jQuery innerWidth()Method to get or set the width of the selected element (including padding).

jQuery innerHeight()Method to get or set the height of the selected element (including padding).

The following example retrieves the inner width and inner height of a DIV element:

$("div").click(function(){
　　let w = $(this).innerWidth();
　　let h = $(this).innerHeight();
　　$("this").html("Inner width: "　+　w　+　"<br>"　+　"Inner height: "　+　h);
});

jQuery externalWidth() and outsideHeight() methods

jQuery outerWidth()Method to get or set the width of the selected element (including padding and border).

jQuery outerHeight()Method to get or set the height of the selected element (including padding and border).

The following example retrieves the outer width and outer height of a DIV element:

$("div").click(function(){
　　let w = $(this).outerWidth();
　　let h = $(this).outerHeight();
　　$("this").html("Outer width: "　+　w　+　"<br>"　+　"Outer height: "　+　h);
});

outerWidth(true) Method to get or set the width of the selected element (including padding, border, and margin).

outerHeight(true) This method gets or sets the height of the selected element (including padding, border, and margin).

The following example retrieves the outer width and outer height of a DIV element (including margins):

$("div").click(function(){
　　let w = $(this).outerWidth(true);
　　let h = $(this).outerHeight(true);
　　$("this").html("Outer width[+margin]:"　+　w　+　"<br>"　+　"Outer height[+margin]: "　+　h);
});

More examples

Display the differences between width(), height(), innerWidth(), innerHeight(), outerWidth(), and outerHeight():

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

You can also find the width and height of the window and document:

$(window).width();//　Return the width of the browser window
$(document).width();　　//　Return the width of the HTML document
$(window).height();//　Return the height of the browser window
$(document).height();　　//　Return the height of the HTML document

jQuery CSS Reference

For a complete reference of CSS methods, please visit ourjQuery HTML / CSS Reference.