Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

jquery
communitycreator

What are the jQuery height() and innerHeight() methods?

Minahil Areej

An element has different dimensions, i.e., Width and Height. With the help of jQuery, we can easily work with these dimensions. jQuery has different methods to deal with dimensions including:

  • width()
  • innerWidth()
  • outerWidth()
  • height()
  • innerHeight()
  • outerHeight()

We will discuss two of these, height() and innerHeight().

jQuery - height()

The jQuery - height() method is used to return the computed height or set the height of the element.

Note: This method sets or returns the height excluding padding, border, and margin.

Height of Element

Syntax

To return Height

It returns the height of the first matched element.

$(selector).height()

No parameters are needed to return the height of the element.

To set Height

It sets the height of all matched elements.

$(selector).height(value)

The value parameter is required to set the height of the element. If the unit of height is not defined then, by default, the unit of height is set to px. You can also specify height in em, pt, etc.

  • px- Pixel unit is Absolute Length unit and is browser dependent.
  • em - A relative unit, in which font-size is relevant to the base/parent element font-size.
  • pt - Points, Absolute Length unit, used in print media and 1pt=1/72nd of 1 Inch.

To return window and document height

It can be used to get the height of the document and window. Its syntax is shown below:

$(window).height()
$(document).height()

Example

Height() Examples

jQuery - innerHeight()

The jQuery - innerHeight() method is used to return the computed Inner height or set the innerHeight of an element.

Note: This method returns or sets the height including upper and lower padding and excluding margin and border.

Inner Height of Element

Syntax

To return Inner Height

It returns the Inner height of the first matched element.

$(selector).innerHeight()

No parameters are needed to return the inner Height of the element.

To set Inner Height

It sets the Inner height of all matched elements.

$(selector).innerHeight(value)

The value parameter is required to set the Inner Height of the element. If the unit of height is not defined then, by default, the unit of the height is set to px. You can also specify height in em, pt, etc.

Example

Note: Change the Height of the Block to see the Difference in the Inner Height. You will notice the addition of 30px (Upper Padding: 15px + Inner Padding: 15px) in Height-value, each time you change the height to different value.

InnerHeight() Example

RELATED TAGS

jquery
communitycreator
RELATED COURSES

View all Courses

Keep Exploring