On BOM and DOM (6): bit value calculation of DOM objects and event objects, such as offsetx/top and clearx

Will always be javascript Of event Object's clientX,offsetX,screenX,pageX I feel dizzy , So I decided to draw a picture to distinguish ( My hand is so sour ....)

event Object location information acquisition

Let's summarize the differences ：

event.clientX、event.clientY

The mouse is relative to browser Of the viewable area of the window X,Y coordinate （ Window coordinates ）, The viewable area does not include toolbars and scrollbars .IE Events and standard events both define this 2 Attributes

event.pageX、event.pageY

Be similar to event.clientX、event.clientY, But they use document coordinates instead of window coordinates . this 2 Attribute is not a standard attribute , But it has broad support .IE There was no such thing in the incident 2 Attributes .

event.offsetX、event.offsetY

The mouse is relative to the event source element （srcElement） Of X,Y coordinate , Only IE The incident has this 2 Attributes , Standard events have no corresponding properties .

event.screenX、event.screenY

The mouse is relative to the top left corner of the user's display screen X,Y coordinate . Standard events and IE Events define this 2 Attributes

dom Element location information acquisition

client Refers to the visual content of the element itself . barring overflow The folded part , Not including scrollbars 、border, Include padding

    obj.clientWidth = (width + padding)   // Get the width of the element —— The visible width of the object , Changes with the display size of the window

    obj.clientHeight = (height + padding)  // The height of the elements

    clientTop、clientLeft These two return the thickness of the border around the element , Generally, its value is 0. Because the scroll bar doesn't appear at the top or left

offset Finger offset , Include all display widths taken up by this element in the document . Than client More border.

    obj.offsetWidth = width + padding + border  // Width of element

    obj.offsetHeight = border-width*2+padding-top+height+padding-bottom // Height of element

    offsetParent Property returns a reference to an object , This object is a distance call offsetParent The most recent of the parent elements of （ The closest... In the containment hierarchy ）, And it has been done CSS Positioned container elements . If the container element does not CSS location , be offsetParent The value of the attribute is the reference of the root element .

• If the parent element of the current element does not have CSS location （position by absolute/relative）,offsetParent by body
• If the parent element of the current element has CSS location （position by absolute/relative）,offsetParent Take the nearest element in the parent

    obj.offsetLeft   // Merged height , Element gets the entire layout relative to the parent element , from offsetParent Property specifies the calculated upper position of the parent coordinate

    obj.offsetTop  // Element relative to the parent element top

If the width of the bullet frame （offsetWidth）+ The distance to the left （offsetLeft） Greater than the width of the parent element , It is judged to be out of the range of external elements , You need to dynamically change the position of the pop-up frame from the border

scroll Refers to scrolling , Include the actual width that this element does not show , Include padding, Not including scrollbars 、border

    scrollWidth Gets the scrolling width of the object , The actual width of the object ;

    scrollHeight Get the scrolling height of the object

    scrollLeft  The width that has been scrolled   Sets or gets the distance between the left boundary of the object and the leftmost 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

js in getBoundingClientRect

When the scroll position changes ,top and left The attribute value will change immediately （ therefore , Their values are relative to the viewport , Not absolutely ）. If you need to get the attribute value positioned relative to the upper left corner of the whole page , Then just give top、left Property value plus the current scroll position （ adopt window.scrollX and window.scrollY）, In this way, you can get the value independent of the current scroll position .

Reprint This station article 《 We can talk BOM and DOM(6):dom Object and event Object bit value calculation — Such as offsetX/Top,clentX》, Please indicate the source ：https://www.zhoulujun.cn/html/webfront/SGML/xml/2015_1209_353.html