the various heights of jquery
First, say $ (document) and $ (window), as follows:
$ (document). Height (),//width of the entire Web page (window). height ();///Browser Visual window's Altitude $ (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 ()); The browser's current window has a visible area height of alert (document). Height ()); The height of the browser's current window document, alert ($ (document.body). Height ()); Browser Current Window document body height alert ($ (document.body). Outerheight (True)); The total height of the browser's current window document body includes border padding Marginalert ($ (window). width ()); Browser Current window viewable area width alert (document). width ()); Browser Current Window Document object width alert ($ (document.body). width ()); Browser Current Window document body width alert ($ (document.body). Outerwidth (True)); Browser Current Window document body total width includes border padding margin
the various heights of JavaScript
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, and clientwidth equal if scroll bars and borders are 0) the visible area of the Web page is high [body only]: document.body.offsetHeight (including scroll bars and borders, if scrollbars and borders are 0, is equal to clientheight) the visible window width (including the width of the scroll axis): window.innerwidth; ie9+, Chrome, Firefox, Opera, and Safari visual window heights, excluding browser top toolbars: window.innerheight;//ie9+, Chrome, Firefox, Opera, and Safari Web page Body full text width (excluding the width of the scroll axis): Document.body.scrollWidth page Body Full text High: document.body.scrollheight//If there is no scroll axis 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
The height of the jquery () and the height of the JavaScript summary, JS get screen Heights