jQuery Set Height in px, em, pt Examples (Div Height, li Height, etc.)

In an earlier article, we have seen how we can get the height of an element, such as a div, li, etc. using jQuery. In this article, lets discuss how to set height in px(pixels), em, pt, etc. using jQuery The actual code to  is just 1 line, so it’s super easy to follow along. Read on to find out more.

How to Set the Height of elements using jQuery?

jQuery provides us with a very simple method, called height(). So the basic syntax to set height of an element would be as follows:

Basic Syntax to Set element height using jQuery

//value represents numerical value in pixels
$(selector).height(value);

//optionally you can specify the relative unit of measurement along with the value
$(selector).height("valuepx");

Example 1: Set div height using div ID – Set it to 50 pixels

$('#my_div').height(50);

//The code below produces the same output as the above code
$('#my_div').height("50px");

Example 2: Set div height using div class – Set it to 100 pixels

$('.my_div_class').height(100);

Example 3: Set li height – Set it to 75 pixels

$('ul li').height(75);

Example 4: Set specific li height – Set it to 18 pixels

$('li#list_item_1').height(18);

$('#list_item_1').height(18);

Example 5: Set paragraph height – Set it to 100 pixels

$('p').height(100);

If you have noticed something, all heights expressed are in pixels. What if you want to use another measurement alternative such as em, pt instead of pixels? Let’s see how we can do that.

Example 6: Set div height using div ID – Set it to 10 em

$('#my_div').height("10em");

Example 7: Set div height using div class – Set it to 1000 pt

$('.my_div_class').height("1000pt");

Your Turn!

Do you know of any other ways to set height of an element (li, div, etc.) using jQuery? Feel free to suggest by commenting below.