zoukankan      html  css  js  c++  java
  • JS offsetTop、clientTop、scrollTop、offsetTop各属性介绍

    本身的宽高,不包括border

    • clientWidth
    • clientHeight

    本身的宽高,包括border

    • offsetWidth
    • offsetHeight

    距离左侧和上部的距离,相对于窗口

    • offsetLeft
    • offsetTop

    获取可以滚动的宽度(不包括border)如果内容宽高币本身小,该值为本身宽高,否则就是内容的宽高

    • scrollWidth
    • scrollHeight

    滚动出去的距离

    • scrollLeft
    • scrollTop

    相对于窗口左上角的点

    • clientX
    • clientY

    相对于屏幕左上角的点(建议移动端使用)

    • screenX
    • screenY

    相对于本身左上角的点

    (非标准属性)
    •offsetX
    • offsetY

    相对于整个文档左上角的点(建议移动端使用)

    • pageX
    • pageY

    获取窗口的宽高

    • document.body.clientWidth
    • document.body.clientHeight
    • document.body.offsetWidth (border)
    • docuemnt.body.offsetHeight (border)

    获取正文的宽高(可以滚动的款到)

    • document.body.scrollWidth
    • docuemnt.body.scrollHeight

    获取正文滚出去的宽高

    • document.body.scrollTop
    • document.body.scrollLeft

    获取屏幕分辨率宽高

    • window.screen.width
    • window.screen.height

    获取左边框宽度和上边框宽度

    • clientLeft
    • clientTop



    作者:凤凰跑跑
    链接:https://www.jianshu.com/p/39f4730d3815
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
  • 相关阅读:
    又回来咯
    4 20210412-1 原型设计作业
    3 20210405-1 案例分析作业
    202103226-1 编程作业
    阅读任务
    准备工作
    原型设计作业
    案例分析
    编程作业
    构建之法读后感
  • 原文地址:https://www.cnblogs.com/water-wf/p/9203954.html
Copyright © 2011-2022 走看看