Always be javascript event object clientX offsetX, screenX, pageX dizzy, he decided to make a chart to differentiate between (my hand painted the acid ah…).

Event Indicates the location of the object

To summarize the differences:

Event. ClientX, event. ClientY

The X and Y coordinates (window coordinates) of the mouse relative to the viewable area of the browser window, excluding toolbars and scroll bars. Both IE events and standard events define these two attributes

Event. The pageX, event. PageY

Similar to event.clientx and event.clienty, but they use document coordinates instead of window coordinates. These two properties are not standard, but are widely supported. These two attributes are not present in IE events.

Event. The offsetX, event. OffsetY

Mouse relative to the event source element (srcElement) X,Y coordinates, only IE events have these two attributes, standard events do not have corresponding attributes.

Event. ScreenX, event. ScreenY

The X and Y coordinates of the mouse relative to the upper left corner of the user’s monitor screen. Both standard events and IE events define these two attributes

Dom element location information is obtained

Client refers to the visual content of the element itself. Does not include overflow folded parts, does not include scroll bars, border, and does not include padding

Obj. ClientWidth = (width + padding) // Get the width of the element — the visible width of the object, which changes depending on the window display size

Obj. clientHeight = (height + padding) // The height of the element

ClientTop and clientLeft return the thickness of the border around the element, usually 0. Because scrollbars don’t appear at the top or on the left

Offset refers to the offset, including all display widths that this element occupies in the document. There are more borders than clients.

Obj.offsetwidth = width + padding + border // The width of the element

Obj. offsetHeight = border-width*2+padding-top+height+padding-bottom // The height of the element

The offsetParent property returns a reference to an object that is closest (in the containment hierarchy) to the parent element that called offsetParent and that has been CSS positioned. If the container element is not CSS positioned, the offsetParent attribute takes on the value of a reference to the root element.

  • If there is no CSS position (absolute/relative) in the parent element of the current element, offsetParent is body

  • If the parent element of the current element has a CSS position (absolute/relative), offsetParent takes the nearest parent element

Obj.offsetleft // The merged height of the element relative to its parent to get the entire layout, calculated from the parent coordinate specified by the offsetParent property

Obj.offsettop // The element’s top relative to its parent

If the width of the frame (offsetWidth) + the distance to the left (offsetLeft) is greater than the width of the parent element, it is judged to be outside the scope of the external element, and the position of the frame from the frame needs to be dynamically changed

Scroll refers to scrolling, including the actual width of the element that is not displayed, including the padding, excluding the scroll bar and the border

ScrollWidth Gets the scrolling width of the object, the actual width of the object;

ScrollHeight Gets the scrolling height of the object

ScrollLeft Sets or gets the distance between the left edge of the object and the leftmost portion 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

In the js getBoundingClientRect

When the scrolling position changes, the values of the top and left attributes change immediately (therefore, their values are relative to the viewport, not absolute). If you need to get a value relative to the top left corner of the entire page, just add the current scroll position to the top and left attributes (via window.scrollx and window.scrolly). This will get a value independent of the current scroll position.

Reprint the home station article talk about BOM and DOM (6) : DOM object and event object – such as offsetX value calculation/Top, clentX “, please indicate the source: www.zhoulujun.cn/html/webfro…