JS中各种宽度、高度、位置、距离总结

1、关于Windows

  • window.screen.width、window.screen.height (返回屏幕的宽度、高度)
  • window.screen.availWidth、window.screen.availHeight (返回屏幕的宽度和高度 (不包含任务栏))
  • window.screen.pixelDepth 返回屏幕的颜色分辨率(每象素的位数)
  • window.outerHeight、window.outerWidth 窗口的外部宽度(高度),包括所有界面元素(如工具栏/滚动条)
  • window.innerWidth、window.innerHeight 窗口的内部宽度与高度(不包含工具条与滚动条)
  • window.pageXOffset、window.pageYOffset 文档在窗口左上角水平和垂直方向滚动的像素
  • window.scrollX、window.scrollY 获取文档水平滚和垂直滚动的的像素数。IE不支持
  • window.screenX、window.screenY 窗口相对于屏幕的X和Y坐标。ie中window.screenLeft 和 window.screenTop获得相同的值 但是浏览器计算方式不同,不使用

2、关于事件对象的

  • event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。
  • event.pageX、event.pageY 鼠标相对于文档的坐标。
  • event.offsetX、event.offsetY 鼠标相对于事件源元素(srcElement)的X,Y坐标,最早只有IE有,现在都支持。
  • event.screenX、event.screenY 鼠标相对于用户显示器屏幕左上角的X,Y坐标。

3、关于element

  • element.offsetHeight、element.offsetWidth 元素的可视宽高距离。
  • element.offsetLeft、element.offsetTop 返回当前元素左上角相对于 element.offsetParent 节点的左边界偏移的像素值(包含margin)。
  • element.clientTop、element.clientLeft 内容区域的左上角相对于整个元素左上角的位置,不包含padding,及borde值。
  • element.clientWidth、element.clientHeight 元素的宽度和高度,不包括边框。
  • element.scrollLeft、element.scrollTop 元素滚动的像素大小
  • element.scrollWidth、element.scrollHeight 表示整个内容区域的宽高,包括隐藏的部分。如果元素没有隐藏的部分,则相关的值应该等用于clientWidth和clientHeight。scrollHeight应该等用于scrollTop + clientHeight。

猜你喜欢

转载自blog.csdn.net/m1009113872/article/details/110679029