Detailed description of JavaScript web page Positioning

Detailed description of JavaScript web page Positioning

This article mainly introduces JavaScript web page positioning in detail. If you need it, you can refer to it for help.

Visible area width of the webpage: document. body. clientWidth

Visible area height: document. body. clientHeight

Visible area width of the webpage: document. body. offsetWidth (including the width of the edge)

Visible area height of the webpage: document. body. offsetHeight (including the width of the edge)

Webpage text width: document. body. scrollWidth

Webpage text height: document. body. scrollHeight

The height of the page to be rolled: document. body. scrollTop

Left: document. body. scrollLeft

Page body: window. screenTop

Page body part left: window. screenLeft

Screen Resolution height: window. screen. height

Screen Resolution width: window. screen. width

Available screen workspace Height: window. screen. availHeight

Available workspace width: window. screen. availWidth

 

 

Precise HTML positioning: scrollLeft, scrollWidth, clientWidth, and offsetWidth

ScrollHeight: gets the scroll height of an object.

ScrollLeft: sets or obtains the distance between the left-side border of the object and the leftmost end of the currently visible content in the window.

ScrollTop: sets or obtains the distance between the top of the object and the top of the visible content in the window.

ScrollWidth: gets the scroll width of an object.

OffsetHeight: gets the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.

OffsetLeft: obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute.

OffsetTop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetTop attribute.

The horizontal coordinates of event. clientX relative to the document

The vertical coordinates of event. clientY relative to the document

Horizontal coordinates of event. offsetX relative to the container

Event. offsetY vertical coordinates of the container

Document.doc umentElement. scrollTop vertical scroll Value

Event.clientxw.document.doc umentElement. The horizontal coordinate of scrollTop relative to the document + The amount of vertical scrolling

 

The differences between IE and FireFox are as follows:

 

IE6.0, FF1.06 +:

 

ClientWidth = width + padding

 

ClientHeight = height + padding

 

OffsetWidth = width + padding + border

 

OffsetHeight = height + padding + border

 

IE5.0/5.5:

ClientWidth = width-border

 

ClientHeight = height-border

 

OffsetWidth = width

 

OffsetHeight = height

 

(The margin attribute in CSS is independent of clientWidth, offsetWidth, clientHeight, and offsetHeight)

 

========================================================== ==================

 

Yesterday, I changed the layout of some pages in the project. After the change, I found some js files were difficult to use. The page width obtained through a statement such as document.doc umentElement. clientWidth is 0. After too many Googles, we know that the W3C standard is missing on the new page, leading to invalid document.doc umentElement. clientWidth:

 

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

If this line is added to the page

 

In IE:

Document. body. clientWidth ==> BODY object width

Document. body. clientHeight ==> BODY object height

Document.doc umentElement. clientWidth ==> visible area width

Document.doc umentElement. clientHeight => visible area height

 

In FireFox:

Document. body. clientWidth ==> BODY object width

Document. body. clientHeight ==> BODY object height

Document.doc umentElement. clientWidth ==> visible area width

Document.doc umentElement. clientHeight => visible area height

 

In Opera:

Document. body. clientWidth ==> visible area width

Document. body. clientHeight ==> visible area height

Document.doc umentElement. clientWidth ==> Page Object width (that is, the width of the BODY object plus the Margin width)

Document.doc umentElement. clientHeight ==> Page Object height (that is, the height of the BODY object plus the Margin height)

If W3C standards are not defined

 

IE:

Document.doc umentElement. clientWidth ==> 0

Document.doc umentElement. clientHeight => 0

 

FireFox:

Document.doc umentElement. clientWidth ==> Page Object width (that is, adding the bodyobject width to the marginwidth) document.doc umentElement. clientHeight ==> Page Object height (that is, the BODY object height plus the Margin height)

 

Opera:

Document.doc umentElement. clientWidth ==> Page Object width (that is, adding the bodyobject width to the marginwidth) document.doc umentElement. clientHeight ==> Page Object height (that is, the BODY object height plus the Margin height)