Js:body element Objects clientwidth, offsetwidth, ScrollWidth, ClientLeft, Offsetleft, scrollleft

Document.body.clientWidth

Gets the width of the content viewable area of the BODY element object, which is clientwidth=width+padding, excluding scroll bars.

Document.body.clientHeight

Gets the height of the content visual area of the BODY element object, that is, clientheight=height+padding, excluding the scroll bar.

Browser compatibility

In IE7, if you set a scrollbar to the body, the scroll bar appears inside the body. So when you set width and height for the body, the values for clientwidth and clientheight in IE7 are smaller than the values in other browsers.

Document.body.offsetWidth

Gets the width of the BODY element object, which is offsetwidth=width+padding+border, or it can be written as Offsetwidth=clientwidth+border.

Document.body.offsetHeight

Gets the height of the Body element object, which is offsetheight=height+padding+border, or it can be written as Offsetheight=clientheight+border.

Browser compatibility

In IE7, if you set a scrollbar to the body, the scroll bar appears inside the body. So the values for the offsetwidth and offsetheight also need to be added to the width of the scroll bar. Of course the final value is the same as other browsers.

Document.body.scrollWidth

Gets the actual width of the content of the BODY element object, which is the scrolling width of the object.

Document.body.scrollHeight

Gets the actual height of the content of the BODY element object, that is, the object's scroll height.

Browser compatibility

• In Firefox and IE, it gets the actual width of the content inside the BODY element object.
• In Chrome, Safari, Opera, scrollwidth and ScrollHeight get the scroll width of the entire page document.

Document.body.clientLeft

Gets the width of the left border of the BODY element object.

Document.body.clientTop

Gets the width of the top border of the BODY element object.

Browser compatibility

Each browser behaves consistently.

Document.body.offsetLeft

Gets the position of the body element object relative to itself.

Document.body.offsetTop

Gets the position of the body element object relative to itself.

Browser compatibility

• In Chrome, Opera, Safari, IE8, IE9, and IE10, it works fine, with both Offsetleft and offsettop having a value of 0.
• In Firefox, the values of offsetleft and offsettop are negative for the border-width of the BODY element.
• In IE7, Offsetleft and offsettop refer to the distance from the border of the Body element object (excluding the border) to the edge of the page document.

Document.body.scrollLeft

Gets the number of pixels that the page document scrolled to the right.

Document.body.scrollTop

Gets the number of pixels that the page document scrolled down.

Browser compatibility

• In Firefox, IE8, IE9, and IE10, the values for scrollleft and scrolltop are always 0.
• In IE7, the value of ScrollLeft and scrolltop is the distance between the top of the BODY element object and the top of the object's content, that is, the distance the scrollbar rolls over.

The test code used in this article is as follows:

<! DOCTYPE html>