jquery get div height

Using jQuery to Get the Height of a Div#

If you're working with HTML and CSS, chances are you'll need to get the height of a <div> element at some point. Fortunately, jQuery makes it easy to do just that.

Method 1: Using .height()#

The simplest way to get the height of a <div> element is to use the .height() method in jQuery. This method returns the height of the first matched element in pixels.

var divHeight = $('div').height();
console.log(divHeight); // Output: 300

In the example above, the .height() method is used to get the height of the first <div> element on the page. The height of the <div> element is then stored in the divHeight variable and logged to the console.

Method 2: Using .css()#

If you need to get the height of a <div> element that has been styled with CSS, you can use the .css() method in jQuery.

var divHeight = $('div').css('height');
console.log(divHeight); // Output: "300px"

In the example above, the .css() method is used to get the value of the height property of the first <div> element on the page. The height of the <div> element, including the units (pixels), is then stored in the divHeight variable and logged to the console.

Method 3: Using .outerHeight()#

If you need to get the outer height of a <div> element (including padding, border, and margin), you can use the .outerHeight() method in jQuery.

var divHeight = $('div').outerHeight();
console.log(divHeight); // Output: 350

In the example above, the .outerHeight() method is used to get the outer height of the first <div> element on the page. The outer height of the <div> element, including padding, border, and margin, is then stored in the divHeight variable and logged to the console.