Code has been added to clipboard!

Using jQuery .height() to Set or Get Element Height

Reading time 1 min
Published Jan 19, 2018
Updated Oct 2, 2019

jQuery height: Main Tips

  • The jQuery .height() method returns the height of the first selected element.
  • It can also be used to set the height for all selected elements.
  • To make jQuery set height, you can define the new value in either string (with valid measurement units) or number (pixels by default).
  • You can read more about jQuery methods used for height and width in this tutorial.

Modifying Height

jQuery .height() is used to set or return the height of selected elements.

In the example below, a click event will trigger an alert displaying the height of the <p> element. The element will also change height:

Example
$("button").click(() => {
    alert($("p").height());
});

$("button").click(() => {
    $("p").height(40);
});

To make jQuery get height of an element, you will need to use this syntax (with no parameters):

$(selector).height();

Use this method to get jQuery window height or document height. Add document or window in the place of the selector.

Note: CSS height property does not include padding, margin, and border.

To make jQuery set height of an element, you need to define a new height value:

$(selector).height(newHeight);

Note: you can also use a function returning a height to set instead of a value.

Learn jQuery
Introduction
Selectors
Events
Event Methods
Download
Callback
Chaining
Get and Set
Add Element
Remove Element
Traverse
Parent
Children
Sibling Traverse
Filtering
jQuery AJAX
Effects
Show and Hide
Fade Effect
Slide Effect
Animate Effect
Manipulate CSS
Width and Height
.addClass()
.after()
.animate()
.append()
.appendTo()
.attr()
.before()
.bind() (deprecated)
.blur()
.change()
.click()
.clone()
.css()
.dblclick()
.delay()
.delegate() and .undelegate() (deprecated)
.detach()
.empty()
.end()
.error() (deprecated)
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
.finish()
.focus()
.focusIn()
.focusOut()
.hasClass()
.height()
.hide()
.hover()
.html()
.innerHeight()
.innerWidth()
.insertAfter()
.insertBefore()
.keypress()
.keyup()
.live() and .die() (deprecated)
.load() (deprecated)
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.off()
.offset()
.offsetParent()
.on()
.one()
.outerHeight()
.outerWidth()
.position()
.prepend()
.prependTo()
.prop()
.proxy()
.queue()
.ready()
.remove()
.removeAttr()
.removeClass()
.removeProp()
.replaceAll()
.replaceWith()
.resize()
.scroll()
.scrollLeft()
.scrollTop()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.submit()
.text()
.toggle()
.toggleClass()
.trigger()
.triggerHandler()
.unbind() (deprecated)
.unload() (deprecated)
.unwrap()
.val()
.width()
.wrap()
Event Properties
event.currentTarget
event.preventDefault()
event.relatedTarget
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
jQuery .find()
jQuery .keydown()
jQuery.noConflict()
pageY and pageX