Offsettop, offsetleft, offsetwidth, and offsetheight

Assume that obj is an HTML control.

OBJ. offsettop refers to the upper-side position of OBJ relative to the layout or the parent coordinate specified by the offsetparent attribute. It is an integer in pixels.

OBJ. offsetleft refers to the left-side position of OBJ relative to the layout or the parent coordinate specified by the offsetparent attribute. It is an integer in pixels.

OBJ. offsetwidth refers to the absolute width of the OBJ control. It does not include the undisplayed part due to overflow, that is, the actual width, integer, and unit pixel.

OBJ. offsetheight refers to the absolute height of the OBJ control, excluding the undisplayed parts due to overflow, that is, the actual height occupied by the OBJ control, which is an integer in pixels.

We will describe the offsetparent mentioned above.

Offsetparent gets the reference of the container Object Defining the offsettop and offsetleft attributes of the object. Offsettop and offsetparent are very complicated. Different browsers have different interpretations, and the floating interpretation is different. Therefore, we generally only need to understand the two to obtain the absolute position of the control in the browser.

The preceding attributes are also valid in Firefox.

In addition, what we refer to here refers to the attribute value of the HTML control, not document. body, document. body values have different interpretations in different browsers (in fact, most environments are due to document. the reason why the body interpretation is different is not because the offset interpretation is different). Click here to view the differences.

These parameters are used to make image scrolling and text scrolling.

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 );

Full text width of the webpage: Document. Body. scrollwidth;
Webpage text height: Document. Body. scrollheight;

The height of the page to be rolled: Document. Body. scrolltop;
Left of the webpage to be rolled: 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 screen workspace width: window. Screen. availwidth;