js中各种位置

每次都会把js一些位置的属性搞混。。。先做个笔记
clientHeight

内容可视区域的高度。包括padding不包括border、水平滚动条、margin。对于inline的元素这个属性一直是0，单位px，只读元素。

offsetHeight

offsetHeight = clientHeight + border + 滚动条。对于inline的元素，这个属性一直是0，单位px，只读元素。

scrollHieght

当子元素的高度比本元素高,且overflow不等于hidden时,scrollHeight就是网页实际内容的高度。包括可视区域和被滚动条隐藏的区域。

clientWidth
offsetWidth
scrollWidth

同height

clientTop

元素上边框的厚度,当没有指定时,一般为0

offsetTop

元素距离父元素顶端的高度

scrollTop

滚动条被隐藏部分的高度,一般用来计算向下滚动多少像素

clientLeft
offsetLeft
scrollLeft

同top

event.clientX
event.clientY

相对于窗口可视区域的X,Y坐标,可视区域不包括工具栏和滚动条。

event.pageX
event.pageY

类似于event.pageX、event.pageY,但他们使用的是文档坐标而非窗口坐标。这两个属性不是标准属性，但得到广泛支持。
event.pageX = event.clientX + 横向滚动条距离。

event.offsetX
event.offsetY

鼠标相对于事件源元素(target)的X,Y坐标，只有IE事件有这两个属性，标准事件没有对应的属性

screenX
screenY

鼠标相对于用户显示器左上角的X,Y坐标。标准事件和IE事件都定义了这两个属性

• getBoundingClientRect ( ) 返回值：对象 有6个属性
  • left（元素左侧相对于可视区左上角的距离）
  • right（元素右侧相对于可视区左上角的距离）
  • top（元素上边相对于可视区左上角的距离）
  • bottom（元素下边相对于可视区左上角的距离）
  • width（可视宽度）
  • height（可视高度）
• 获取可视区宽高：
  • window.innerWidth
  • window.innerHeight
  • document.documentElement.clientWidth
  • document.documentElement.clientHeight
• 屏幕宽高：
  • window.screen.width
  • window.screen.height
• 获取文档宽高：
  • document.body.clientWidth
  • document.body.clientHeight
  • document.documentElement.scrollWidth
  • document.documentElement.scrollHeight
  • document.body.scrollWidth（如果内容宽度超过一屏，得到文档宽度；如果内容小于一屏，得到一屏的宽度）
  • document.body.scrollHeight （如果内容高度超过一屏，得到文档高度；如果内容小于一屏，得到一屏的高度）
• 获取滚动条距离：
  • document.body.scrollTop
  • document.body.scrollLeft
  • window.scrollY
  • window.scrollX
  • document.documentElement.scrollTop
  • document.documentElement.scrollLeft
  • window.pageYOffset
  • window.pageXOffset