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
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
  • 相关阅读:
    2021 CCPC 桂林站 补题
    2021 ICPC 上海 流水账
    2021 ICPC 沈阳 补题
    vi中的多行注释和取消注释
    查询列表可筛选可模糊查询的写法
    mybatisplus逻辑删除deleted
    @JsonFormat
    @Component类相互引用的加载顺序
    Chrome浏览器嗅探方法
    DataAdapter.FillSchema 方法
  • 原文地址:https://www.cnblogs.com/water-wf/p/9203954.html
Copyright © 2011-2022 走看看