• client offset scroll 之间的区别


    一、client

    属性
    clientWidth 元素被设置的宽度 + padding左右内间距
    clientHeight 元素被设置的高度 + padding上下内间距
    clientLeft 左 边框的宽度
    clientTop 上 边框的宽度

     

    二、offset

    属性
    offsetWidth 元素被设置的宽度 + padding左右内间距 + 左右边框的值
    offsetHeight 元素被设置的高度 + padding上下内间距 + 上下边框的值
    offsetLeft 元素外边距离父级左内边距
    offsetTop 元素外边距离父级上内边距
    offsetParent 返回这个元素的父级元素

     

    注:1)offsetLeft/offsetTop:参照由父级身上的 position:absolute/fixed,如果父级元素身上没有就逐层向上查找,直到 body;

    2)offset 必须和 position 配合使用,往往这个值还必须是 absolute;

    3)offset往往和我们做元素的运动有关;

     

    三、scroll

    属性
    scrollWidth/scrollHeight 就是我们设置的宽和高加内边距(内容没有溢出的前提,如果超出了范围就按内容而定)
    scrollLeft/scrollTop 滚动条卷走的高度

     

    四、总结

    1)client系列不获取边框数值,offset会获取边框的数值;

    2)以上两者获取到的数值都受元素被设置的宽高具体数值影响,如果在出现滚动条的情况下想获取元素内所有内容的实际高度,则使用scrollHeight;

    3)获取浏览器的body的属性是有兼容的

    var  dd=document . body || document . documentElement;

      获取body的整个文档的高

    document . scrollHeight || document . documentElement . scrollHeight;

      获取屏幕的高(浏览器的可视区)

    document . body || document . documentElement . clientHeight

     

  • 相关阅读:
    密度聚类与层次聚类
    51单片机系列-单片机定时器
    C++&QT-day4
    Linux学习笔记13 - 进程间通信(IPC)(四)
    机器学习One-Hot编码
    SiC MOSFET的短路特性及保护
    数据湖(十):Hive与Iceberg整合
    Kubernetes(k8s)包管理工具Helm:Helm包管理
    数据服务:冗灾容错,质量保障
    菜鸟Linux(3):环境变量
  • 原文地址:https://www.cnblogs.com/cyy22321-blog/p/16370149.html