Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.