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

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

Today is the 918 Incident 83 anniversary, we do not forget national humiliation! Come on, learn! Economy and technology in every way more than little Japan!

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:

1 $ (document). Height (); // the height of the entire Web page 2 $ (window). Height (); // the height of the browser's visible window 3 $ (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,

1 $ (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 border that gets a height greater than $ (document). Height () small; height (): The meaning of the height obtained on different browsers will vary, To be blunt is browser incompatibility.

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: Height + filler outerheight: Height + filler + border, when parameter is true: Height + padding + border + margin

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.

1Alert ($ (window). Height ());//Browser Current window viewable area height2Alert (document). Height ());//the height of the browser's current window document3Alert ($ (document.body). Height ());//the height of the body of the browser's current window document4Alert ($ (document.body). Outerheight (true));//Browser Current Window document body total height includes border padding margin5Alert ($ (window). width ());//Browser Current window viewable area width6Alert (document). width ());//Browser Current Window Document object width7Alert ($ (document.body). width ());//Browser Current Window document body width8Alert ($ (document.body). Outerwidth (true));//Browser Current Window document body total width includes border padding margin

The various heights of JavaScript

1 Web page visible area width [body only]: Document.body.clientWidth2 Web page visible Area high [for body only]: Document.body.clientHeight3 Web page visible area width [body only]: document.body.offsetWidth (including scroll bars and borders, if scrollbars and borders are 0, then clientwidth equals)4 Web page visible Area high [body only]: document.body.offsetHeight (including scroll bars and borders, if scrollbars and borders are 0, then clientheight equals)5Visible window width (including scroll axis width): window.innerwidth;//ie9+, Chrome, Firefox, Opera, and Safari6Visual window height, excluding browser top toolbar: window.innerheight;//ie9+, Chrome, Firefox, Opera, and Safari7 page Body Full text width (excluding the width of the scroll axis): Document.body.scrollWidth8 page Body Full text High: Document.body.scrollHeight9 //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. Ten page is rolled away High: Document.body.scrollTop One webpage is rolled away left: Document.body.scrollLeft A page body part: Window.screentop - page body part left: Window.screenleft - High screen resolution (entire screen height): window.screen.height the Width of screen resolution (width of entire screen): Window.screen.width - screen Available work area height: window.screen.availHeight - screen Available work area width: window.screen.availWidth - Total Browser Available workspace height: window.outerheight +Total browser usable 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