• 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

     

  • 相关阅读:
    PMP每日一练 | 考试不迷路-9.14(包含敏捷+多选)
    Android Studio中修改项目支持的最小SDK版本的方法
    数据库基础
    golang之channel的使用
    SpringCloud之nacos
    如何只使用TD跟踪微分器改进普通PID控制(附完整梯形图代码)
    30张图说清楚 TCP 协议
    spring 源码编码若干问题
    Docker的简介
    C语言:结构体
  • 原文地址:https://www.cnblogs.com/cyy22321-blog/p/16370149.html