Code has been added to clipboard!

Using jQuery .innerHeight(): Syntax and Examples Provided

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

jQuery innerHeight: Main Tips

  • jQuery .innerHeight() sets or returns the inner height of the selected element.
  • You may read more about jQuery height and width methods in this tutorial.

Two Ways of Using innerHeight

By using jQuery .innerHeight() method, you can either get or set the height of the specified element (including padding but excluding borders).

In the example below, an alert indicating the height of the element will show up after you click the button. After you close the alert, the element will change height:

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

$("button").click(() => {
    $("p").innerHeight(80);
});

To return jQuery inner height, you will need to use this syntax:

$(selector).innerHeight();

To set it, we add one parameter that specifies the height to set:

$(selector).innerHeight(newHeight);

Note: the newHeight can be defined in a string, a number, or a function that returns a value to set.

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