Dimensions in jQuery

It's simple to manipulate element and browser window dimensions with jQuery.

Dimension Methods in jQuery

jQuery includes several useful methods for continuing to work with components:

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()


width() and height() are jQuery methods for determining the width and height of a document.

The width() method determines or returns an element's width (without padding, border and border).

The height() method determines or returns an element's height (without padding, border and border).

The width and height of a stipulated div> element are returned in the given description:

Illustration:

EXAMPLE ❯


innerWidth() and innerHeight() strategies in jQuery

The width of an element is brought back by the innerWidth() method (with padding).

An element's height is brought back by the innerHeight() method (includes padding).

This same inner-width/height of a stipulated div> element is returned in the illustration below:

Illustration:

EXAMPLE ❯


The element's width is brought back by the outerWidth(true) method (with padding, border, and margin).

Illustration:

EXAMPLE ❯


width() and height() tasks in jQuery ()

This same width and height of the report (HTML document) and window (web viewport) are brought back in the following scenario:

Illustration:

EXAMPLE ❯


The illustration specifies the width and height of a defined div> element:

Illustration:

EXAMPLE ❯