Summary of page and block HEIGHT attributes in Javascript

I often see why Baidu gets 0 for cliengheihgt, where is the difference between clientheight and offsetheight? Why are you always confused when you encounter such problems, the reason is that they do not know their attributes,When creating an HTML page, we usually specify the width of an element (in percentages or pixels), but the height may vary depending on your content.The common problems associated with the height of a block are: the number of heights that scroll down to a specific place, the absolute position of an element, and the height of a block relative to another block. In this caseCSS is not always helpful, especially if pages are dynamic, it is very helpful to use JavaScript to obtain their values.

Page height

To set the height of a window object, follow these steps:

Attribute	Description
Innerheight (innerwidth)	Set the height of the content area of the window
Outerheight (outerwidth)	Set window height
Screen. availheight (screen. availwidth)	Height: the screen size of the workspace in pixels (excluding the height of the toolbar)
Screen. Height (screen. width)	Screen height (in pixels)
Screeny (screenx)	The distance from the top of the screen to the upper border of the browser window
Scrolly (scrollx)	Vertical document scrolling distance
Pageyoffset (pagexoffset)	The current vertical position of the page is relativeWindow AngleTop left

Note: First, not all browsers support this feature. Second, not all attribute values are consistent.In addition, do not forget that these are all for all properties in the window object, which means they only apply to the window object, so you cannot write document. getelementbyid (ID ). innerheight, etc. However, during the test (ie 6, FF 2.0, opera 9.25), we found that all browsers only support windows. screen. availheight and window. screen. height (see the summary table below ).However, in most cases, this is not enough. It is often necessary to know the height of the block or container, so you should look for other methods

attribute	description
clientheight (clientwidth)	NO scroll bar height
scrollheight (scrollwidth)	height of the scroll bar
scrolltop (scrollleft)	vertical displacement between the current position and the upper boundary of the block
offsetheight (offsetwidth)	specifies the visible width of an object, including the same side of the scroll bar, the window size changes.

Important: these attributes must be fully loaded on the page before they can be used. Otherwise, they may be different,Why? See the following table....

Summary table

Attribute	Doctype Not Defined			Defined !! 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	undefined	807	848	undefined	807	848
window. outerheight	undefined	979	911	undefined	979	911
window. screen. availheight	971	971	971	971	971	971
window. screen. height	1024	1024	1024	1024	1024	1024
window. screeny	undefined	-4	-23 / TD>	undefined	-4	-23 / TD>
window. scrolly	undefined	changes depend on scrolling	undefined	undefined	changes depend on scrolling	undefined
window. pageyoffset	undefined	changes depend on scrolling	changes depend on scrolling	undefined	changes depend on scrolling	changes depend on scrolling
document. body. clientheight	846	807	848	3196	3124	3136
document. body. scrollheight	3252	3202	3166	3196	3124	3136
document. body. scrolltop	changes depend on scrolling	changes depend on scrolling	changes depend on scrolling	0	0	0
document.doc umentelement. scrolltop	0	0	0	changes depend on scrolling	changes depend on scrolling	changes depend on 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 and click the refresh button below to test)

Window. innerheight		700
Window. outerheight		878
Window. Screen. availheight		870
Window. Screen. Height		900
Window. screeny		-4
Window. scrolly		0
Window. pageyoffset		0
Document. Body. clientheight		145
Document. Body. scrollheight		145
Document. Body. scrolltop		0
Document.doc umentelement. scrolltop		0
Document. Body. offsetheight		145
The document. getelementbyid (TBL) ). Clientheight		347
The document. getelementbyid (TBL) ). Scrollheight		347
The document. getelementbyid (TBL) ). Offsetheight		347

Note: The values in the table depend on individual settings (toolbar, 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 preceding parameters;
• When determining the height on the screen, you can always determine according to window. Screen. height;
• Locate a page or block elementThe height of the visible part.UseThe document. getelementbyid. (ID ).Clientheight, Including the scrolling part-The document. getelementbyid (ID ).Scrollheight.

Hide