js gets the position of the control and the differences in different browsers

js gets the position of the control and the differences in different browsers_javascript skills

WBOY

Release： 2016-05-16 17:26:20

Original

1166 people have browsed it

Copy code The code is as follows:

 
//Get the coordinate position
function getpos(e) { 
var t=e.offsetTop; 
var l=e.offsetLeft; 
var height=e.offsetHeight; 
while(e=e.offsetParent) { 
t =e.offsetTop; 
l =e.offsetLeft; 
} 
} 

Assume obj is an HTML control.
obj.offsetTop refers to the position of obj from the top or upper control, integer, unit pixel.
obj.offsetLeft refers to the position of obj from the left or upper control, integer, unit pixel.
obj.offsetWidth refers to the width of the obj control itself, integer, unit pixel.
obj.offsetHeight refers to the height of the obj control itself, integer, unit pixel.

Let’s explain the “top or upper” and “left or upper” controls mentioned earlier.

For example:

Copy code The code is as follows:

The offsetTop of the "Submit" button refers to the distance between the "Submit" button and the upper border of the "tool" layer, because the closest to its upper edge is the upper border of the "tool" layer.
The offsetTop of the "Reset" button refers to the distance between the "Reset" button and the upper border of the "tool" layer, because the closest to its upper edge is the upper border of the "tool" layer.

The offsetLeft of the "Submit" button refers to the distance between the "Submit" button and the left border of the "tool" layer, because the closest to its left is the left border of the "tool" layer.
The offsetLeft of the "Reset" button refers to the distance of the "Reset" button from the right border of the "Submit" button, because the closest to its left is the right border of the "Submit" button.

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. And style.top returns a string, which in addition to numbers 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 The horizontal coordinate relative to the container
event.offsetY The vertical coordinate relative to the container
document.documentElement.scrollTop The value of vertical scrolling
event.clientX document.documentElement.scrollTop relative The amount of vertical scrolling of the horizontal coordinate of the document

The above mainly refers to IE, the difference in FireFox is as follows:

Copy code The code is 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 

( Need to mention: the margin attribute in CSS has nothing to do with clientWidth, offsetWidth, clientHeight, and offsetHeight)