Javascript, jquery get browser and screen various height widths

$ (document). Ready (function ()
{
Alert ($ (window). Height ()); Browser Current window viewable area height
Alert (document). Height ()); The height of the browser's current window document
Alert ($ (document.body). Height ());//browser Current window document body
Alert ($ (document.body). Outerheight (True));//The total height of the document body of the browser's current window includes border padding margin

Alert ($ (window). width ()); Browser Current window viewable area width
Alert (document). width ());//browser Current window Document object widths
Alert ($ (document.body). width ());//The height of the body of the document in the current window of the browser
Alert ($ (document.body). Outerwidth (True));//The total width of the document body of the browser's current window includes border padding margin

alert (screen.height);//display resolution, can only be obtained with JavaScript code

alert (screen.width);
})
</script>

Web page Visible area width: document.body.clientWidth Web page Visible Area height: document.body.clientHeight Web page Visible Area width: document.body.offsetWidth (including edge width) Web page Visible Area High: document.body.offsetHeight (including edge height) Page body Full text width: document.body.scrollWidth Page body Full text High: Document.body.scrollHeight Page is rolled away High: document.body.scrollTop Webpage is rolled away left: document.body.scrollLeft Page body part: Window.screentop Page body part left: Window.screenleft High screen resolution: Window.screen.height Width of screen resolution: Window.screen.width Screen available work area height: window.screen.availHeight

Javascript:

alert (document.body.clientWidth); Web page visible area width (body)

alert (document.body.clientHeight); Web page Visible Area high (body)

alert (document.body.offsetWidth); Web page visible area width (body), including border, margin, etc.

alert (document.body.offsetHeight); Web page visible area width (body), including border, margin, etc.

alert (document.body.scrollWidth); Page body full text width, including non-visible area with scroll bar

alert (document.body.scrollHeight); The full text of the Web page is high, including the unseen area with scroll bars

alert (DOCUMENT.BODY.SCROLLTOP); Top (scroll bar) of the page being rolled away

alert (document.body.scrollLeft); Web page is rolled away left (scroll bar)

alert (window.screentop); Browser Distance Top

alert (window.screenleft); Browser distance left

alert (window.screen.height); High screen resolution

alert (window.screen.width); Width of screen resolution

alert (window.screen.availHeight); The screen can be high on the work area

alert (window.screen.availWidth); The width of the work area available on the screen

Jquery

Alert ($ (window). Height ()); Browser Current window viewable area height

Alert (document). Height ()); The height of the browser's current window document

Alert ($ (document.body). Height ()); The height of the body of the browser's current window document

Alert ($ (document.body). Outerheight (true)); Browser Current Window document body total height includes border padding margin

Alert ($ (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

calculate element position and offset

The offset method is a useful way to return the offset information for the first element in a wrapper set. By default, the offset information is relative to the body. The result contains top and left two properties.

Offset (options, results)

Options.relativeto Specifies the ancestor element relative to the offset position. This element should be relative or absolute positioned. Omitted is relative to body.

Options.scroll whether the scroll bar is counted, by default true

options.padding whether to calculate padding, default false

Options.margin whether margin is counted, by default true

Options.border whether the border is counted, by default true

jquery,javascript,$ (document), Height,width, height, width

JS to get a wide screen, high page width

Window.screen.availWidth returns the current screen width (blank space)
Window.screen.availHeight returns the current screen height (blank space)
Window.screen.width returns the current screen width (resolution value)
Window.screen.height returns the current screen height (resolution value)
Window.document.body.offsetHeight; Returns the current page height
Window.document.body.offsetWidth; Returns the current page width

Form maximization

1.
Modify <body> for <body onload= "Max. Click () > to open the Maximize window
Modify <body> for <body onload= "Min. Click () > to open the minimized window

2.
The following code joins the <body> area

<object id= "min" type= "Application/x-oleobject" classid= "Clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" >

<param name= "Command" value= "Minimize" >

</object> <object id= "Max" type= "Application/x-oleobject" classid= "CLSID: Adb880a6-d8ff-11cf-9377-00aa003b7a11 ">

<param name= "Command" value= "Maximize" >

</object>

<! DOCTYPE Html><script src="Jquery-1.5.1.min.js"Type="Text/javascript"></script>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAA"Text/javascript">alert (document.body.clientWidth); alert (document.body.clientHeight); alert ( document.body.offsetWidth); alert ( document.body.offsetHeight); alert (document.body.scrollWidth); alert (document.body.scrollHeight); alert ( DOCUMENT.BODY.SCROLLTOP); alert (document.body.scrollLeft); alert (window.screentop); alert (window.screenleft); alert (window.screen.height); alert (window.screen.width); alert (window.screen.availHeight); alert ( Window.screen.availWidth);//alert (document). Height ());//alert (document). width ());</script>

Page height

How to set the height of a Window object:

Properties	Description
Innerheight (innerwidth)	Sets the height of the window's content area
Outerheight (Outerwidth)	Set window height
Screen.availheight (Screen.availwidth)	Height, in pixels, of the workspace screen size (without the height of the toolbar)
Screen.height (Screen.width)	The height of the screen (in pixels)
ScreenY (ScreenX)	Distance from the top of the screen to the top edge of the browser window
Scrolly (SCROLLX)	The distance the document scrolls vertically
pageYOffset (Pagexoffset)	The current vertical position of the page is relative to the top left of the window corner

Note that not all browsers support the first, and second, not all attribute values are consistent. Also, do not forget that these are all properties for the Window object, which means that they apply only to the Window object, so you cannot write document.getElementById (ID) like this. Innerheight etc. however, during the testing process (IE 6, FF 2.0, Opera 9.25), it turns out that all browsers only support Window.screen.availHeight and window.screen.height (see summary table below). But, in most cases, it is not enough, it is often to know the height of a block or container, so you should look for other ways

Properties	Description
ClientHeight (clientwidth)	No height for scroll bars
ScrollHeight (ScrollWidth)	Including the height of the scroll bar
ScrollTop (ScrollLeft)	Vertical displacement of the current position relative to the upper boundary of the block
Offsetheight (offsetwidth)	The visible width of the object, the edges such as the package scroll bar, and the size of the window's display

Important NOTE: These properties need to be used after the page is fully loaded, otherwise it might be different. Look at the table below ...

Summary table

Property	no doctype defined	Define IT!! DOCTYPE XHTML 1.0 Transitional
IE browser (6)	FF (2.0)	Opera (9.25)	IE browser (6)	FF (2.0)	Opera (9.25)
Window.innerheight	Not defined	807	848	Not defined	807	848
Window.outerheight	Not defined	979	911	Not defined	979	911
Window.screen.availHeight	971	971	971	971	971	971
Window.screen.height	1024	1024	1024	1024	1024	1024
Window.screeny	Not defined	-4	-23	Not defined	-4	-23
Window.scrolly	Not defined	Vary depending on the scrolling	Not defined	Not defined	Vary depending on the scrolling	Not defined
Window.pageyoffset	Not defined	Vary depending on the scrolling	Vary depending on the scrolling	Not defined	Vary depending on the scrolling	Vary depending on the scrolling
Document.body.clientHeight	846	807	848	3196	3124	3136
Document.body.scrollHeight	3252	3202	3166	3196	3124	3136
Document.body.scrollTop	Vary depending on the scrolling	Vary depending on the scrolling	Vary depending on the scrolling	0	0	0
Document.documentElement.scrollTop	0	0	0	Vary depending on the scrolling	Vary depending on the scrolling	Vary depending on the scrolling
Document.body.offsetHeight	850	3192	848	3196	3124	3136
document.getElementById (THIS_TBL). clientheight	361	371	361	361	370	361
document.getElementById (THIS_TBL). scrollheight	361	371	361	361	370	361
document.getElementById (THIS_TBL). offsetheight	361	371	361	361	370	361

Test in your browser (refresh the page by clicking on the Refresh button below the line test)

Window.innerheight		916
Window.outerheight		1020
Window.screen.availHeight		1020
Window.screen.height		1050
Window.screeny		0
Window.scrolly		0
Window.pageyoffset		0
Document.body.clientHeight		975
Document.body.scrollHeight		2412
Document.body.scrollTop		0
Document.documentElement.scrollTop		0
Document.body.offsetHeight		975
document.getElementById (TBL). clientheight		421
document.getElementById (TBL). scrollheight		421
document.getElementById (TBL). offsetheight		421

Note: The values in the table depend on personal settings (toolbars, status bar, font size, etc.), so they may be different, even if your browser version is the same.

Conclusion

DOCTYPE affects the values of the above parameters;

When determining the height on the screen, you can always determine according to the Window.screen.height;

Find the height of the visible portion of a page or block element using the document.getElementById. (ID). clientheight, including the scrolling section- document.getElementById (ID). ScrollHeight.

Javascript, jquery get browser and screen various height widths