Javascript&jquery get browser and screen various height width methods Summary and application

"JS article"

JavaScript get browser and screen various height width method summary  

• Document.body.clientWidth//Web page visible area width (body)
• Document.body.clientHeight//Web page Visible area high (body)
• Document.body.offsetWidth//Web page visible area width (body), including border, margin, etc.
• Document.body.offsetHeight//Web page visible area width (body), including border, margin, etc.
• Document.body.scrollWidth//page body text width, including non-visible area with scroll bar
• Document.body.scrollHeight//The full text of the Web page is high, including the unseen area with scroll bars
• Document.body.scrollTop//page top (scroll bar) to be rolled away
• Document.body.scrollLeft//pages are rolled away left (scroll bar)
• Window.screentop//Browser distance top
• Window.screenleft//Browser distance left
• Window.screen.height//High screen resolution
• Window.screen.width//width of screen resolution
• Window.screen.availHeight//screen can be high in the working area
• Window.screen.availWidth//Screen available for the width of the work area

The first case is that the width and height are written in the style sheet, like #div1{height:120px;}. This situation can not be reached through the #div1.style.height height, and through the #div1.offsetheight to get to the height.

The second case is high is written in the middle, such as style= "height:120px;", in this case through the above 2 methods can be obtained width.

In conclusion,

Because Id.offsetwidth and id.offsetheight ignore styles in style sheets or rows, it's best to use these 2 attributes when we get the element width and height. Note If you do not write a property in a style within a row, you cannot get it through ID.STYLE.ATRR.

Today's front-end productions seldom write styles directly in style, they are written in the style table. If you want to get a style that does not correspond (like #div1.style.width corresponding to #div1.offsetwidth), you can only use the browser to get the style sheet properties, you may try to search "JS get style properties" and so on.

Core code:

var o = document.getElementById ("view"); var h = o.offsetheight;  Height var w = o.offsetwidth;  Width

　　

　　

Demo Example:

<! DOCTYPE html>

　　

　　

"The jquery chapter"

JavaScript get browser and screen various height width method summary

• Gets the height of the browser display area (viewable area): $ (window). Height ();
• Gets the width of the browser display area (viewable area): $ (window). width ();
• Gets the document height of the page. Height ();
• Gets the document width of the page: $ (documents). width ();
• Browser Current Window document body Height: $ (document.body). Height ();
• Browser Current Window document body width: $ (document.body). width ();
• Gets the vertical height of the scroll bar to the top (that is, the height of the page being rolled up) $ (document). ScrollTop ();
• Gets the vertical width of the scroll bar to the left: $ (document). ScrollLeft ();
• Gets or sets the width of the element: $ (obj). width ();

Gets or sets the height of the element:

• $ (obj). Height ();

The distance from the upper boundary of an element to the top of the body: Obj.offset (). Top; (in case the element's containing element does not contain a scroll bar)The left edge of an element to the leftmost distance of the body: Obj.offset (). to left; (in case the element's containing element does not contain a scroll bar)Returns the offset of the top boundary of the current element to its containing element: Obj.offset (). Top (in the case where the element's containing element contains scroll bars)Returns the offset of the left edge of the current element to its left edge of the containing element: Obj.offset (). Ieft (with scroll bars in the element's containing element)

• ScrollTop (), ScrollLeft ()

Sets or returns the number of pixels that have scrolled to the left or upper bounds of an element. To put it simply, it is to set or get the offset of the matching element relative to the top or left side of the scroll bar.

These pixels are only useful when the element's CSS overflow property is set to auto when the elements have scroll bars.

These properties are also defined only on the <body> or

Note that these properties do not specify a scroll amount for the <iframe> tag. This is a non-standard but well-supported property

Demo Example:

<! DOCTYPE html>

　　

　　

Resources:

Http://hemin.cn/jq/cheatsheet.html

http://blog.csdn.net/makiyonn/article/details/8587353

Http://blog.sina.com.cn/s/blog_51048da70101djoy.html

Javascript&jquery get browser and screen various height width methods Summary and application