The height of the jquery () and the height of the JavaScript summary, JS get screen Heights

The height of the jquery () and the height of the JavaScript summary, JS get screen Heights

In JavaScript and jquery, there are various heights of writing, here, we focus on the window, document and other high understanding. (width and height are similar!) )

The various heights of jquery

First, say $ (document) and $ (window), as follows:

$ (document). Height (); // the height of the entire page (window). Height (); // the height of the browser visual window $ (window). scrolltop (); // the height of the top of the page from the top of the browser's visible window (vertical offset)

In a nutshell, when the page scroll bar is pulled to the lowest end,

$(document).height() == $(window).height() + $(window).scrollTop()。

Note that is pulled to the lowest end!

$ (document) when the page height is less than the browser window. Height () returns a $ (window). Height ()

If you want to get the height of the entire page, it is not recommended to use $ ("html"). Height (), $ ("body")

Reason:

$ ("body"). Height (): The body may have a bounding rectangle that gets a higher height than $ (document). Height () small; height (): The meaning of the height you get on different browsers will vary, but the browser is not compatible.

Saying here, referring to borders and margins and padding, we naturally think of the other two heights of jquery, that is Innerheight () and Outerheight ()

Innerheight () and outerheight () Do not apply to window and document objects, which can be replaced with. Height () for window and document objects. Innerheight () and outerheight () are used primarily to obtain the height of the label.

Innerheight ()

innerHeight:高度＋补白outerHeight:高度＋补白＋边框，参数为true时：高度＋补白＋边框＋边距

Innerheight (value)

This "value" parameter can be a string (number plus unit) or a number, and if the "value" parameter only provides a number, jquery automatically adds the pixel unit (PX). If you supply only one string, any valid CSS size can be assigned a height (like 100px, 50%, or Auto). Note In modern browsers, the CSS height property does not contain padding, border, or margin unless the BOX-SIZINGCSS attribute is applied.

jquery height, put it in the browser and try it.

Alert ($ (window). Height ());//Browser Current window viewable area heightAlert (document). Height ());//the height of the browser's current window documentAlert ($ (document.body). Height ());//the height of the body of the browser's current window documentAlert ($ (document.body). Outerheight (true));//Browser Current Window document body total height includes border padding marginAlert ($ (window). width ());//Browser Current window viewable area widthAlert (document). width ());//Browser Current Window Document object widthAlert ($ (document.body). width ());//Browser Current Window document body widthAlert ($ (document.body). Outerwidth (true));//Browser Current Window document body total width includes border padding margin

The various heights of JavaScript

Web page visible area width [body only]: Document.body.clientWidth Web page visible Area high [body only]: Document.body.clientHeight Web page visible area width [body only]: Document.body.offsetWidth (including scroll bars and borders, if scrollbars and borders are 0, and clientwidth equal) page visible area height [body only]: Document.body.offsetHeight ( including scroll bars and borders, and clientheight equal if scrollbars and borders are 0) visual window width (including scroll axis width): window.innerheight; //ie9+, Chrome, Firefox, Opera, and SafariVisual window height, excluding browser top toolbar: window.innerwidth;//ie9+, Chrome, Firefox, Opera, and Safaripage Body Full text width (not including scroll axis width): document.body.scrollWidth page Body Full text High: Document.body.scrollHeight//If there are no scrolling axes in the page, document.body.scrollWidth and window.innerwidth are equal, document.body.scrollHeight and window.innerheight are equal. Web page is rolled High: Document.body.scrollTop Web page is rolled left: Document.body.scrollLeft page body part: Window.screentop page body part left: Window.screenleft High screen resolution (entire screen height): window.screen.height width of screen resolution (width of entire screen): Window.screen.width screen usable workspace height: Window.screen.availHeight screen Available workspace width: Window.screen.availWidth entire browser available workspace height: window.outerheight Total Browser available workspace width: Window.outerwidth

Conclusion

Note that in the use of jquery innerheight () and Outerheight (), there may be browser compatibility issues, different browsers appear different heights, in short, practical knowledge, you can test, write a few small demo, summed up!

After reading the height of jquery and JavaScript, do not know how you feel, this article hope to help you, can leave a message to communicate with each other, thank you!

The height of the jquery () and the height of the JavaScript summary, JS get screen Heights