Element calculation distance and event object

Element calculation distance and event Event object

Elements

1. offsetLeft/offsetTop

The current element is left relative to the parent element / Offset of upper edge . Read-only property , The parent element cannot be static. If the current element is fixed location , Returns the distance between the element and the window .

2. style.left/style.top

The current element is left relative to the parent element / Offset of upper edge .

Be careful
offsetLeft/offsetTop And style.left/style.top The difference between ：

1. offset Is a read-only property ,style.left Are readable and writable properties ;
2. offset The return value is Number type , The decimal will be rounded off ,style.left The return value is string type （ for example ：100px）;
3. style.left Must be in html Defined in label , If in style perhaps css Invalid definition in file , Returns an empty string

3. offsetHeight/offsetWidth

The height of the current element / Width .offset value = content + padding + border, barring margin

4. style.height/style.width

The height of the current element / Width .style value = content + padding, barring border and ,margin

Be careful
offsetHeight/offsetWidth And style.height/style.width The difference between ：

1. offset Is a read-only property ,style Are readable and writable properties ;
2. offset The return value is Number type , The decimal will be rounded off ,style.left The return value is string type （ for example ：100px）;
3. offset Yes border,style barring border;
4. style Must be in html Defined in label , If in style perhaps css Invalid definition in file , Returns an empty string
5. If the element has no height / Width ,offset The height will be automatically obtained according to the content / Width ,style Returns an empty string

5. clientWidth/clientHeight

The width of the current element / Height .client value = content + padding, barring border、margin And scroll bars

6. scrollWidth/scrollHeight

Roll width / Height .scroll = content + padding, Excluding borders . Read-only property , When there is no scroll bar, it is equivalent to clientWidth/clientHeight

7. scrollTop/scrollLeft

Scroll bar scroll distance upper edge / The distance . Readable and writable properties .

8. innerWidth/innerHeight

• window.innerWidth/window.innerHeight：
  ① The width of the document display area of the window / Height ,inner value = content + padding, Excluding the menu bar 、 Scroll bar, etc ;
  ② Read-only property ;
  ③IE9 The following is not supported , Processing compatibility ：

var w=window.innerWidth || document.documentElement.clientWidt || document.body.clientWidth;

9. outerWidth/outerHeight

• window.outerWidth/window.outerHeight：
  ① Width of window / Height ,outer value = content + padding + border, If outerWidth(true) when ,outer value = content + padding + border + margin;
  ② Read-only property , Include menu bar 、 Scroll bar

event Event object

1. e.offsetX/e.offsetY

The horizontal distance between the mouse click position and the trigger event object / Vertical distance

2. e.clientX/e.clientY

The horizontal distance of the mouse click position relative to the visible area of the browser / Vertical distance , Not including scrollbars

3. e.pageX/e.pageY

The horizontal distance of the mouse click position relative to the visible area of the browser / Vertical distance , Including scrollbars

4. e.screenX/e.screenY

The mouse click position is relative to the left of the computer screen / The distance above

5. e.movementX/e.movementY

When an object moves , The horizontal distance between the current moving position and the previous moving position / Vertical distance

6. layerX/layerY

Commonly used in Firefox browser , Act on offsetX/offsetY identical

Reference article ：https://juejin.cn/post/6883353218319908871