Common width and height of JS/jQ and its Application

About the width and height of js, a random search is a lot. This pile is not good for me. I have a big head to look at. So today I summarize some of the more commonly used ones and explain the application scenarios.

Let's start with the delicate relationship between documentElement and body:

DocumentElement===html-> documentElement.childNode [2] = body [obviously, father-son relationship]

If html is not declared in, you will not get the value of documentElement, but at this point body==documentElement, this is the following compatible way to write.

Ps: the following content only talks about height,width for the same reason.

Width, height and application of js:

Visual area size (.clientHeight):

To document: visual area height = the high-toolbar part of the browser height.

Compatible writing: document.documentElement.clientHeight | | document.documentElement.clientHeight.

For div: visual area height = height + padding.

DivObj.clientHeight.

Scroll distance (.scrollTop):

For document: the top of the visual area to the top of the page, that is, the part of the page that is rolled up.

Get compatible writing method: document.body.scrollTop | | document.documentElement.scrollTop.

Set compatible writing method: document.body.scrollTop = document.documentElement.scrollTop=...

To the part of div:div that was rolled up.

Acquired and written by divObj.scrollTop.

Set to write: divObj.scrollTop=...

.scrollHeight:

On document: document.body.scrollHeight is regarded as the height of the entire page. [when the content of the web page is greater than clientHeight]

Acquired and written by document.body.scrollHeight.

For div: when there is no scroll bar, the results of scrollHeight and clientHeight properties are equal, and the results of scrollWidth and clientWidth properties are equal

When there is a scroll bar, that is, when there is a content overflow, the scroll attribute is greater than the client attribute, and the divObj.scrollHeight includes the hidden part. ScrollHeight can be used to get the wholeHeight of div to scroll to the bottom to load.

[note] there is a compatibility problem with the scrollHeight property. In chrome and safari browsers, scrollHeight contains padding-bottom; while IE and firefox do not contain padding-bottom.

.offsetHeight:

For document:

IE and Opera think offsetHeight = clientHeight + scroll bar + border. NS and FF think that offsetHeight is the actual height of web content, which can be less than clientHeight.

For div:

DivObj.offsetHeight=height+padding+border.

A good thing about Amway:

GetboundingClientRect (). The distance of each edge visual area of top/right/bottom/left; / / div.

Visual area loading:

1 function showDiv () {2 var showId=document.getElementById ("showDiv"); 3 var clients=window.innerHeight | | document.documentElement.clientHeigh | | document.body.clientHeigh;4 var divTop=showId.getBoundingClientRect () .top; / / determine whether 5 if (divTop= scrollHeight) {/ / slide to the bottom count++; / / add 1 alert each time you slide to the bottom ("scroll bottom");}})