Compilation of knowledge related to JavaScript page coordinates_Basic knowledge

offsetTop can get the position of the HTML element from the top or outer element. style.top can also be used. The difference between the two is:

1. offsetTop returns a number, while style.top returns a number. top returns a string, in addition to numbers, it also has the unit: px.
2. offsetTop is read-only, while style.top is read-writeable.
3. If the top style is not specified for the HTML element, style.top returns an empty string.


The same is true for offsetLeft and style.left, offsetWidth and style.width, offsetHeight and style.height.

scrollHeight: Get the scroll height of the object.
scrollLeft: Sets or gets the distance between the left edge of the object and the leftmost end of the currently visible content in the window
scrollTop: Sets or gets the distance between the topmost edge of the object and the topmost end of the visible content in the window
scrollWidth: Get the scroll width of the object
offsetHeight: Get the height of the object relative to the layout or the parent coordinate specified by the offsetParent property
offsetLeft: Get the height of the object relative to the layout or the parent coordinate specified by the offsetParent property Calculate the left position
offsetTop: Get the calculated top position of the object relative to the layout or the parent coordinate specified by the offsetTop attribute
event.clientX The horizontal coordinate relative to the document
event.clientY The vertical coordinate relative to the document
event.offsetX is the horizontal coordinate relative to the container
event.offsetY is the vertical coordinate relative to the container
document.documentElement.scrollTop is the value of vertical scrolling
event.clientX document.documentElement.scrollTop is relative to the horizontal position of the document The amount of coordinate scrolling in the vertical direction

The above mainly refers to IE. The differences in 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
(It needs to be mentioned: the margin attribute in CSS has nothing to do with clientWidth, offsetWidth, clientHeight, offsetHeight);



IE-------- -------------
The width of the visible area of ​​the web page document.body.clientWidth
The height of the visible area of ​​the web page document.body.clientHeight
The width of the visible area of ​​the web page (including the width of the edges) document.body.offsetWidth
The height of the visible area of ​​the webpage (including the width of the edges) document.body.offsetHeight
The full text width of the webpage document.body.scrollWidth
The height of the full text of the webpage document.body.scrollHeight
The height of the web page being scrolled document.body.scrollTop
The left side of the web page being scrolled document.body.scrollLeft
The upper body of the web page window.screenTop
The left side of the web page body window.screenLeft
Screen resolution high window.screen.height
width of screen resolution window.screen.width
screen available work area height window.screen.availHeight
screen available work area width window.screen.availWidth

Copy code The code is as follows:

//Object coordinates
var oRect = document. getElementById("divHotImg").getBoundingClientRect();
x=oRect.left
y=oRect.top
//alert("(" x "," y ")")

if(ns4||ns6){
x = e.pageX;
y = e.pageY;
}