Fork me on GitHub 盒子
盒子
文章目录
  1. 介绍
  2. 混淆属性
    1. document.body.clientWidth
    2. document.body.offsetWidth
    3. document.body.offsetHieght
    4. document.body.scrollWidth
    5. document.body.scrollHieght
    6. document.body.scrollTop
    7. document.body.scrollLeft
    8. window.screenTop
    9. window.screenLeft
    10. window.screen.height
    11. window.screen.width
    12. window.screen.availHeight
    13. window.screen.availWidth
    14. scrollHeight
    15. scrollLeft
    16. scrollTop
    17. scrollWidth
    18. offsetHeight
    19. offsetLeft
    20. offsetTop
    21. event.clientX
    22. event.clientY
    23. event.offsetX
    24. event.offsetY
    25. document.documentElement.scrollTop
    26. event.clientX+document.documentElement.scrollTop
  3. Tips

document.body.scrollTop等常见易混淆属性整理

介绍

Javascript中有一些常见易混淆的属性,下面我做了一份大概的整理。

混淆属性

document.body.clientWidth

网页可见区域宽

document.body.offsetWidth

网页可见区域宽(包括边线的宽)

document.body.offsetHieght

网页可见区域高(包括边线的高)

document.body.scrollWidth

网页正文全文宽

document.body.scrollHieght

网页正文全文高

document.body.scrollTop

网页被卷去的高

document.body.scrollLeft

网页被卷去的左

window.screenTop

网页正文部分上

window.screenLeft

网页正文部分左

window.screen.height

屏幕分辨率的高

window.screen.width

屏幕分辨率的宽

window.screen.availHeight

屏幕可用工作区高度

window.screen.availWidth

屏幕可用工作区宽度

scrollHeight

获取对象的滚动高度

scrollLeft

设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop

设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth

获取对象的滚动宽度

offsetHeight

获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft

获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop

获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX

相对文档的水平坐标

event.clientY

相对文档的垂直坐标

event.offsetX

相对容器的水平坐标

event.offsetY

相对容器的垂直坐标

document.documentElement.scrollTop

垂直方向滚动的值

event.clientX+document.documentElement.scrollTop

相对文档的水平座标+垂直方向滚动的量

Tips

要获取当前页面的滚动条纵坐标位置,用:document.documentElement.scrollTop;

而不是:document.body.scrollTop;

documentElement 对应的是 html 标签,而 body 对应的是 body 标签


如果能给您带去些许帮助,鄙人不甚欢心。如有错误,恳请交流指出,谢谢!
转载请注明出处:http://mcchen.club/


支持一下
扫一扫,支持McChen