Get the App
SLTechnology News&Howtos  ›  Development  › 

What are the considerations of .height ()

Shulou Source: shulou.com Published: 2022-06-01 07:34:31 09月20日 Update

This article will explain in detail what you should pay attention to about .height (). The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

.height ()

Description: gets the currently calculated height value of the first element in the matching element collection.

Added version: 1.0.height ()

This method does not accept any parameters.

The difference between .css ('height') and .height () is that the latter returns a numeric value without units (for example, 400), while the former returns a string with complete units (for example, 400px). The .height () method is recommended when the height of an element needs to be calculated mathematically.

This method can also calculate the heights of window and document.

(window) .height (); / / returns height of browser viewport

(document) .height (); / / returns height of HTML document

Note that .height () always returns the content width, regardless of the value of the CSS box-sizing property.

Note: although the style and script tags will also report a value with .width () or height () when absolute positioning and a given display:block, it is strongly recommended that these methods not be called in these tags. This is a bad practice, and it turns out to be unreliable.

Example:

Displays each height. Note that the value from the value iframe may be smaller than you expected. Yellow highlights iframe body.

Body {background:yellow;}

Button {font-size:12px; margin:2px;}

P {width:150px; border:1px red solid;}

Div {color:red; font-weight:bold;}

Get Paragraph Height

Get Document Height

Get Window Height

Sample paragraph to test height

Function showHeight (ele, h) {

("div") .text ("The height for the" + ele +

"is" + h + "px.")

}

$("# getp") .click (function () {

ShowHeight ("paragraph", $("p") .height ())

})

$("# getd") .click (function () {

ShowHeight ("document", $(document) .height ())

})

$("# getw") .click (function () {

ShowHeight ("window", $(window) .height ())

})

This is the end of the article on "what are the points for attention of .height ()". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Tags: Method height element article item note content unit more label good practical bad between example practice parameter character string width Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno NVidia Shulou Information macOS Linux Redmi