Js gets the differences between the control location (coordinate location) in different browsers. This article will give you a detailed introduction. If you are interested, refer
The Code is as follows:
// Obtain the coordinates
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 that obj is an HTML control.
Obj. offsetTop refers to the position of the obj control above or upper layer. It is an integer in pixels.
Obj. offsetLeft refers to the position of the obj control on the left or upper layer. It is an integer in pixels.
Obj. offsetWidth refers to the width, integer, and unit pixel of the obj control.
Obj. offsetHeight refers to the height, integer, and unit pixel of the obj control.
We will describe the "top or upper layer" and "Left or upper layer" controls mentioned above.
For example:
The Code is as follows:
The "Submit" button's offsetTop refers to the distance between the "Submit" button and the border on the "tool" layer, because the top border of the "tool" layer is closest to it.
The offsetTop of the "reset" button refers to the distance between the "reset" button and the border on the "tool" layer, because the top border of the "tool" layer is closest to it.
The "Submit" button's offsetLeft refers to the distance between the "Submit" button and the left border of the "tool" layer, because the left border closest to the left is the "tool" layer.
The "reset" button's offsetLeft refers to the distance between the "reset" button and the right border of the "Submit" button, because the right border closest to the left is the "Submit" button.
OffsetTop can be used to obtain the position of the HTML element from the top or the outer element. style. top is also supported. The difference between the two is:
1. offsetTop returns numbers, while style. top returns strings. In addition to numbers, it also has the unit: px.
Ii. offsetTop read-only, while style. top can be read and written.
3. If the top style is not specified for the HTML element, style. top returns an empty string.
OffsetLeft, style. left, offsetWidth, style. width, offsetHeight, and style. height are the same principles.
ScrollHeight: gets the scroll height of an object.
ScrollLeft: sets or obtains the distance between the left-side border of the object and the leftmost end 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: gets the scroll width of an object.
OffsetHeight: gets the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.
OffsetLeft: obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute.
OffsetTop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetTop attribute.
The horizontal coordinates of event. clientX relative to the document
The vertical coordinates of event. clientY relative to the document
Horizontal coordinates of event. offsetX relative to the container
Event. offsetY vertical coordinates of the container
Document.doc umentElement. scrollTop vertical scroll Value
Event.clientxw.document.doc umentElement. The horizontal coordinate of scrollTop relative to the document + The amount of vertical scrolling
The difference between FireFox and IE is as follows:
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
(The margin attribute in CSS is independent of clientWidth, offsetWidth, clientHeight, and offsetHeight)
