JavaScript中client、screen、client、offset、page相关属性及函数总结

window.innerWidth，window.innerHeight

---

返回网页在当前窗口中可见区域的高度和宽度，即 视口(viewport) 的大小（单位像素）。注意，这两个属性包括滚动条的高度和宽度。

window.outerWidth， window.outerHeight

---

返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）。

window.screenX， window.screenY

---

返回浏览器左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。

window.scrollX，window.scrollY

---

返回文档/页面水平和垂直方向滚动的距离（单位像素）。

window.scroll(x, y)，window.scrollTo(x, y)，window.scrollBy(x, y) 的区别

---

前两者都是用于设置滚动条相对于视口的偏移量，后者设置滚动条相对于原位置的偏移量

• scroll(0, 200) ==> 设置滚动条Y轴位置在200像素的地方。
• scrollTo(0, 200) ==> 同上。
• scrollBy(0, 200) ==> 使得滚动条Y轴的位置，在当前的基础上增加200。

Element.clientWidth、Element.offsetWidth、Element.scrollWidth 的区别

---

• clientWidth仅包括盒子的width和padding。内联元素(display: inline) 为0
• offsetWidth包括盒子的width、padding、border、滚动条。display: none 时为0
• scrollWidth仅包括盒子的width和padding，与clientWidth不同的是，它还包括由于overflow溢出而在屏幕上不可见的内容。

Element.clientLeft

---

• clientLeft表示元素的左边框的宽度。当元素设置 display: inline 后，无论是否有边框，clientLeft 始终返回 0 。

Element.scrollLeft

---

• scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。注意如果这个元素的内容排列方向（direction） 是rtl (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft值为0。此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数。

Element.offsetLeft

---

• 返回当前元素左上角相对于 Element.offsetParent 节点的水平偏移量。

Element.offsetParent 是指层级上最近包含 position 属性的元素

Element.getBoundingClientRect()

---

• 返回一个对象
• left、right表示元素左边框、右边框相对于视口的偏移量。
• bottom、top表示元素下边框、上边框相对于视口的偏移量
  
• x、y是元素在视口中的坐标

以下是MouseEvent和Touch相关

let el = document.querySelector('div')
el.addEventListener('click', e => {
  console.log(e)
})

以上代码会输出一个对象

clientX、offsetX、pageX、screenY

---

• clientX：与x属性的值相同，触发事件的位置相对于 浏览器视口 左上角的水平坐标，不包括滚动距离
• offsetX：触发事件的位置相对于目标元素的横向偏移量
• pageX：与clietX的区别在于pageX它 包括了滚动距离
• screenY：顾名思义，它表示的是触发事件的位置在整个屏幕中的坐标