Css get display height

How to Get the Height of an Element

There are many properties that can be used to determine the height/width of elements, but it can be difficult to decide which is appropriate for a particular situation. However, you cannot get the height of an element using only CSS. In this tutorial, we’ll show how you can do this with the help of jQuery.

Solutions with offsetHeight and clientHeight

The first method is to use the offsetHeight property. It is a read-only property that returns the height of an element in pixels, including border, padding, and scrollbar.

We’ll use the following syntax in our example:

Example of getting the height of an element using the offsetHeight property:

html> html> head> title>Title of the document title> style> body < text-align: center; > h1 < color: #8ebf42; > .box < height: 110px; width: 110px; background-color: #8ebf42; display: inline-block; > style> head> body> h1>W3Docs h1> b> Get the height of the element b> p> Click on the button to get the height of the element p> div class="box"> div> p> Height of the div: span class="output"> span> p> button onclick="getHeight()"> Get Height button> script type="text/javascript"> function getHeight( ) < divElement = document.querySelector(".box"); elemHeight = divElement.offsetHeight; document.querySelector(".output") .textContent = elemHeight + "px"; > script> body> html>

The second method is to use the clientHeight property. It is a read-only property that returns the height of an element in pixels, including padding.

We’ll use the following syntax in our next example:

Example of getting the height of an element using the clientHeight property:

html> html> head> title> Title of the document title> style> body < text-align: center; > h1 < color: #8ebf42; > .box < height: 110px; width: 110px; background-color: #8ebf42; display: inline-block; > style> head> body> h1>W3Docs h1> b> Get the height of the element b> p> Click on the button to get the height of the element p> div class="box"> div> p> Height of the div: span class="output"> span> p> button onclick="getHeight()"> Get Height button> script type="text/javascript"> function getHeight( ) < divElement = document.querySelector(".box"); elemHeight = divElement.clientHeight; document.querySelector(".output") .textContent = elemHeight + "px"; > script> body> html>

Solution with jQuery height() and width() methods

We can also use the jQuery height() and width() methods to get the height and width of the element. This height and width do not include border, padding and margin.

Let’s see how we can return the height and width of a element.

Example of getting the height and width of an element using height() and width() methods:

html> html> head> title> Title of the document title> style> #box < width: 300px; height: 200px; padding: 25px; text-align: justify; border: 10px solid #c6b51a; background: #f0e68c; margin: 15px; > style> script src="https://code.jquery.com/jquery-3.5.0.min.js"> script> head> body> div id="box"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla non purus nisld Dapibus nec turpis vel, semper malesuada ant. div> button type="button">Get Width and Height button> p id="result"> p> script> $(document) .ready(function( ) < $("button") .click(function( ) < var divWidth = $("#box") .width(); var divHeight = $("#box") .height(); $("#result") .html("Width: " + divWidth + ", " + "Height: " + divHeight); >); >); script> body> html>

Solution with jQuery innerHeight() and innerWidth() methods

The jQuery innerHeight() and innerWidth() methods get the inner height and width of an element. Inner height and width include padding.

Example of getting the height and width of an element using the innerHeight() and innerWidth() methods:

html> html> head> title> Title of the document title> style> #box < width: 280px; height: 170px; padding: 20px; text-align: justify; border: 10px solid #795d80; background: #a997ad; margin: 15px; > style> script src="https://code.jquery.com/jquery-3.5.0.min.js"> script> head> body> div id="box"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. div> button type="button">Get innerWidth and innerHeight button> p id="result"> p> hr> script> $(document) .ready(function( ) < $("button") .click(function( ) < var divWidth = $("#box") .innerWidth(); var divHeight = $("#box") .innerHeight(); $("#result") .html("Inner Width: " + divWidth + ", " + "Inner Height: " + divHeight); >); >); script> body> html>

Solution with jQuery outerHeight() and outerWidth() methods

The jQuery outerHeight() and outerWidth() methods get the outer height and width. This outer height and width get the outer height and width of an element. Outer height and width include padding and border.

Example of getting the height and width of an element using the outerHeight() and outerWidth() methods:

html> html> head> title> Title of the document title> style> #box < width: 280px; height: 170px; padding: 20px; text-align: justify; border: 10px solid #795d80; background: #a997ad; margin: 15px; > style> script src="https://code.jquery.com/jquery-3.5.0.min.js"> script> head> body> div id="box"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. div> button type="button">Get outerWidth and outerHeight button> p id="result"> p> hr> script> $(document) .ready(function( ) < $("button") .click(function( ) < var divWidth = $("#box") .outerWidth(); var divHeight = $("#box") .outerHeight(); $("#result") .html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight); >); >); script> body> html>

Источник

How to get the rendered height of an element ?

To get the height of an element, there are five common methods in JavaScript. Lets see the differences between each and when they should be used. Only the last method gives the correct rendered height instead of the layout height.

• style.height
• jQuery( height, innerHeight, outerHeight )
• clientHeight, offsetHeight, scrollHeight
• getComputedStyle
• getBoundingClientRect().height

Rendered height is the height that the element gets finally after all the styles and transformations are applied on that element. For example, An element has height of 100px and then gets a transform:scale(0.5). Its rendered height is 50px (after the transformation) and layout height is 100px.

style.height We can use style.height on any selected element and it will return its height. Does not include the padding, border or margin. Italways return the height along with the specific unit.

Note: Only works if we explicitly set the height as inline using the style attribute in HTML.

let height = document.getElementById("someId").style.height;

HTML

Output:
It returns empty string for “div1” and it returns “100px” for “div2”

• For “div1”:
• For “div2”:

Conclusion: It returns whatever height is specified in inline style attribute only. It does not factor in any transformations, like scale. It is not reliable and should not be used as inline styles are not ideal.

jQuery(height, innerHeight, outerHeight)
height() It returns the current height of the element. It does not include the padding, border or margin. It always returns a unit-less pixel value.

Note: The height() will always return the content height, regardless of the value of CSS box-sizing property.

HTML

Output:
It returns unit-less pixel value as 100.

Output:

innerHeight() It returns the current height of the element including the top and bottom padding but not border. It always returns a unit-less pixel value.

let height = $("#div1").innerHeight();

HTML

Output:
It returns 120 which is (10(top padding) + 100(content height) + 10(bottom-padding))

outerHeight() It returns the current height of the element including the padding, border and margin optionally. It always returns a unit-less pixel value.

let height = $("#div1").outerHeight(); let height = $("#div1").outerHeight();

HTML

(1(top border)+ 10(top padding)+ 100(content height)+1 0(bottom-padding)+ 1(bottom border)

Note: The value reported by height(), innerHeight() and outerHeight() is not guaranteed to be accurate when the element or its parent is hidden. To get accurate results, ensure the element is visible before using these methods. jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.

// If you need height of div excluding margin/padding/border $('#div1').height(); // If you need height of div with padding but without border + margin $('#div1').innerHeight(); // If you need height of div including padding and border $('#div1').outerHeight(); // For including border + margin + padding, can use $('#div1').outerHeight(true);

All these return only the layout height, not the rendered height.

clientHeight, offsetHeight, scrollHeight
clientHeight() It returns the height of the displayed content from the element (including vertical padding but not border or margin or scrollbar). It always returns an integer value in pixels. If element is hidden, then 0 is returned. If its a scrollable element, then it will only give the height of the visible part.

let height = document.getElementById("div1").clientHeight;

Источник