Js mouse and object coordinate control properties detailed analysis

  • 2020-03-30 00:56:13
  • OfStack

offsetTop
Gets the computed top position of the object relative to the layout or parent coordinates specified by the offsetParent attribute.

The offsetLeft
Gets the calculated left position of the object relative to the layout or parent coordinates specified by the offsetParent attribute.

offsetHeight
Gets the height of the object relative to the layout or parent coordinates specified by the parent offsetParent attribute.
IE, Opera thinks offsetHeight = clientHeight + scroll bar + border.
NS and FF think that offsetHeight is the actual height of web content, which can be less than clientHeight.

offsetWidth
Gets the width of the object relative to the layout or the parent coordinate specified by the parent offsetParent attribute.

The offsetParent
Gets a reference to the container object that defines the offsetTop and offsetLeft properties of the objects.

clientHeight
Gets the height of the object without calculating any margins, borders, scrollbars, or padding that might be applied to the object.
No one has any problem with clientHeight, except that it's the height of the viewable area of the content, which means the height of the area where the content can be seen in the page browser, usually the area below the last toolbar and above the status bar, which has nothing to do with the content of the page.

clientLeft
Gets the distance between the offsetLeft property and the actual left side of the customer area.

clientTop
Gets the distance between the offsetTop property and the actual top of the customer area.

clientWidth
Gets the width of the object without calculating any margins, borders, scrollbars, or padding that might be applied to the object.

SCROLL properties

scroll
Sets or gets whether scrolling is turned off.

scrollHeight
Gets the scrolling height of the object.

scrollLeft
Sets or gets the distance between the left edge of the object and the far left end of the currently visible content in the window.

scrollTop
Sets or gets the distance between the top of the object and the top of the visible content in the window.

scrollWidth
Gets the scrolling width of the object. The event attributes
x
Sets or gets the x pixel coordinates of the mouse pointer position relative to the parent document.

screenX
Sets or gets the x coordinate of the position of the mouse pointer relative to the user's screen

offsetX
Sets or gets the x coordinate of the mouse pointer position relative to the object that triggered the event.

clientX
Sets or gets the x-coordinate of the mouse pointer position relative to the window's client area, which does not include the window's own controls and scroll bars

Here's how the four browsers explain the clientHeight, offsetHeight, and scrollHeight of document.body. This is document.body, but it's different if it's an HTML control.

These four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox).

clientHeight
No one has any problem with clientHeight, except that it's the height of the viewable area of the content, which means the height of the area where the content can be seen in the page browser, usually the area below the last toolbar and above the status bar, which has nothing to do with the content of the page.

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

scrollHeight
IE and Opera believe that scrollHeight is the actual height of web content, which can be less than clientHeight. NS and FF think that scrollHeight is the height of web content, but the minimum value is clientHeight. In simple terms
ClientHeight is the height of the area where the content is viewed through the browser.

NS and FF believe that both offsetHeight and scrollHeight are the height of web content, except that when the height of web content is less than or equal to clientHeight, the value of scrollHeight is clientHeight, while offsetHeight can be less than clientHeight.
IE and Opera think offsetHeight is the clientHeight scroll bar with a border. ScrollHeight is the actual height of the page content.

In the same way
ClientWidth, offsetWidth, and scrollWidth have the same interpretation as above, except that you can replace the height with the width.

but
FF interprets clientHeight differently in different doctypes, while XHTML 1 trasitional does not. Other browsers don't have this problem.

Js gets the page height


<script> 
function getInfo() 
{ 
var s = ""; 
s += "  Page visible area width: "+ document.body.clientWidth; 
s += "  High visibility area: "+ document.body.clientHeight; 
s += "  Page visible area width: "+ document.body.offsetWidth + " ( Including the width of the edge and scroll bar )"; 
s += "  High visibility area: "+ document.body.offsetHeight + " ( Including the width of the edges )"; 
s += "  Full text width: "+ document.body.scrollWidth; 
s += "  Full text of the web page: "+ document.body.scrollHeight; 
s += "  Web pages are scroll down high (ff) : "+ document.body.scrollTop; 
s += "  Web pages are scroll down high (ie) : "+ document.documentElement.scrollTop; 
s += "  Page scroll to the left: "+ document.body.scrollLeft; 
s += "  On the body of the page: "+ window.screenTop; 
s += "  Page body part left: "+ window.screenLeft; 
s += "  High screen resolution: "+ window.screen.height; 
s += "  Width of screen resolution: "+ window.screen.width; 
s += "  Screen available workspace height: "+ window.screen.availHeight; 
s += "  Screen available workspace width: "+ window.screen.availWidth; 
s += "  Your screen Settings are  "+ window.screen.colorDepth +"  A color "; 
s += "  Your screen Settings  "+ window.screen.deviceXDPI +"  pixel / inches "; 
//alert (s); 
} 
getInfo(); 
</script> 

In my local test:
It works with IE, FireFox, and Opera
Document. Body. ClientWidth
Document. Body. ClientHeight
Accessible, very simple, very convenient.
And in the company's projects:
Opera still USES
Document. Body. ClientWidth
Document. Body. ClientHeight
Internet explorer and FireFox do
Document. The documentElement. ClientWidth
Document. The documentElement. ClientHeight
W3C standards are to blame
< ! PUBLIC DOCTYPE HTML "- / / / / W3C DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
If you add this line of markup to the page

In IE:
Document. Body. ClientWidth = = > BODY object width
Document. Body. ClientHeight = = > BODY object height
Document. The documentElement. ClientWidth = = > Visible area width
Document. The documentElement. ClientHeight = = > Height of visible area

In FireFox:
Document. Body. ClientWidth = = > BODY object width
Document. Body. ClientHeight = = > BODY object height
Document. The documentElement. ClientWidth = = > Visible area width
Document. The documentElement. ClientHeight = = > Height of visible area

In the Opera:
Document. Body. ClientWidth = = > Visible area width
Document. Body. ClientHeight = = > Height of visible area
Document. The documentElement. ClientWidth = = > Page object width (that is, BODY object width plus Margin width)
Document. The documentElement. ClientHeight = = > Page object height (BODY object height plus Margin height)

If no W3C standard is defined, then

IE is:
Document. The documentElement. ClientWidth = = > 0
Document. The documentElement. ClientHeight = = > 0

FireFox is:
Document. The documentElement. ClientWidth = = > Page object width (that is, the object of BODY width and Margin wide) document. The documentElement. ClientHeight = = > Page object height (BODY object height plus Margin height)

The Opera is:
Document. The documentElement. ClientWidth = = > Page object width (that is, the object of BODY width and Margin wide) document. The documentElement. ClientHeight = = > Page object height (BODY object height plus Margin height)

It's a hassle, but from a development perspective, it's easier to have fewer objects and methods than to use the latest standards.


Related articles: