JS mouse and object coordinate control attributes

Offsettop
Obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetparent attribute.

Offsetleft
Obtains the left-side position of an object relative to the layout or the parent coordinate specified by the offsetparent attribute.

Offsetheight
Obtains the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetparent attribute.
IE and opera think offsetheight = clientheight + scroll bar + border.
NS and FF hold that offsetheight is the actual height of the webpage content, which can be smaller than clientheight.

Offsetwidth
Obtains the width of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetparent attribute.

Offsetparent
Gets the reference of the container Object Defining the offsettop and offsetleft attributes.

 Clientheight
Obtains the height of an object, without calculating any margin, border, scroll bar, or padding that may be applied to the object.
Everyone has no objection to clientheight and thinks it is the height of the visible area of the content, that is, the height of the area where the content can be viewed in the browser of the page, generally, the area below the last toolbar to above the status bar is irrelevant to the page content.

Clientleft
Obtain the distance between the offsetleft attribute and the actual left side of the customer region.

Clienttop
Obtain the distance between the offsettop attribute and the actual top of the customer region.

Clientwidth
Obtains the width of an object. It does not calculate any margin, border, scroll bar, or padding that may be applied to the object.
Scroll attributes
Scroll
Set or obtain whether to disable scrolling.

Scrollheight
Obtains the scroll height of an object.

Scrollleft
Set or obtain the distance between the left-side border of the object and the leftmost side 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
Obtains the scroll width of an object. Event Properties
X
Sets or obtains the X-pixel coordinates of the cursor position relative to the parent document.

Screenx
Set or obtain the X coordinate of the cursor position relative to the user's screen

Offsetx
Set or obtain the X coordinate of the object with the cursor position relative to the trigger event.

Clientx
Sets or obtains the X coordinate of the mouse pointer position relative to the client area of the window. The client area does not include the control and scroll bar of the window.

Let's talk about the four types of BrowserDocument. BodyOfClientheight, offsetheightAndScrollheightThe explanation here is:Document. body, if yesHtmlControl, then there are different, click here to view.
The four browsers are InternetExplorer, NS (Netscape), opera, FF (Firefox ).
Clientheight
ForClientheightThere is no objection, and it is regarded as the height of the visible area of the content. That is to say, the height of the area where the content can be viewed in the browser of the page is generally the area below the last toolbar to the status bar, it has nothing to do with the page content.
Offsetheight
IE, operaThinkOffsetheight=Clientheight+Scroll bar+Border.NS, FFThinkOffsetheightIs the actual height of the webpage content, which can be smallerClientheight.
Scrollheight
IE, operaThinkScrollheightIs the actual height of the webpage content, which can be smallerClientheight.NS, FFThinkScrollheightThe webpage content height, but the minimum value isClientheight.Simply put
ClientheightThe height of the area where the content is viewed through the browser.

NS, FFThinkOffsetheightAndScrollheightOnly when the webpage content height is less than or equalClientheightScrollheightThe value isClientheight, andOffsetheightIt can be smallerClientheight.
IE, operaThinkOffsetheightYesvisible AreaClientheightAdd a border to the scroll bar. ScrollheightThe actual height of the webpage content.
Likewise
Clientwidth, offsetwidthAndScrollwidthThe description is the same as above, just change the height to the width.
However
FFIn differentDoctypeModerateClientheightDifferent interpretations,XHTML1TrasitionalIt is not explained above. This problem does not exist in other browsers.

 

JS get page height

 

<SCRIPT>
Function getinfo ()
{
VaR S = "";
S + = "visible area width of the webpage:" + document. Body. clientwidth;
S + = "visible area height of the webpage:" + document. Body. clientheight;
S + = "visible area width of the webpage:" + document. Body. offsetwidth + "(including the width of the edge and scroll bar )";
S + = "visible area height of the webpage:" + document. Body. offsetheight + "(including the width of the edge )";
S + = "webpage body full text width:" + document. Body. scrollwidth;
S + = "webpage text Height:" + document. Body. scrollheight;
S + = "high page volume (FF):" + document. Body. scrolltop;
S + = "high page volume (IE):" + document.doc umentelement. scrolltop;
S + = "Left of the webpage to be rolled:" + document. Body. scrollleft;
S + = "webpage body part:" + window. screentop;
S + = "webpage body part left:" + window. screenleft;
S + = "Screen Resolution Height:" + window. Screen. height;
S + = "Screen Resolution width:" + window. Screen. width;
S + = "available screen workspace Height:" + window. Screen. availheight;
S + = "available workspace width:" + window. Screen. availwidth;
S + = "your screen settings are" + window. Screen. colordepth + "bit color ";
S + = "Your Screen Settings" + window. Screen. devicexdpi + "pixels/inches ";
// Alert (s );
}
Getinfo ();
</SCRIPT>
In my local test:
It can be used in IE, Firefox, and opera
Document. Body. clientwidth
Document. Body. clientheight
It is very simple and convenient.
In the company's projects:
Opera is still in use
Document. Body. clientwidth
Document. Body. clientheight
However, ie and Firefox use
Document.doc umentelement. clientwidth
Document.doc umentelement. clientheight
It turned out to be W3C standards.
<! 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)

It is really troublesome. In fact, from the perspective of development, it is much easier to reduce the number of objects and methods and not to use the latest standards.