zoukankan      html  css  js  c++  java
  • js中offsetHeight、clientHeight、scrollHeight等相关属性区分总结

    今天再次遇到了offset***、client***、scroll***的这三类属性的问题,总是混淆,现归纳总结如下:

    大体上来说可以这样理解:

    client***属性(clientWidth、clientHeight):

      表示元素可以看到内容的可见区域部分,一般是最后一个对象条以下到状况栏以上的这个区域,与页面内容无关。且它会直接返回属性的数值大小,可直接进行计算。分开说的话也可以这样理解:若元素大小小于父元素,大小包括padding、content部分,不包括border;若元素大小大于父元素,则表示可以看到的部分的高或宽。

    offset***属性(offsetWidth、offsetHeight、offsetTop、offsetLeft):

      对于offsetWidth和offsetHeight,都表示当前对象的宽度/高度。offsetWidth与style.widtht的区别是:若对象的宽度设定值为百分百宽度,无论页面变大或变小,style.width都返回此百分比;而offsetWidth则返回页面中对象的宽度值而不是百分比。

      对于offsetTop和offsetLeft,都表示当前元素对象相对于其定位元素的垂直/水平偏移量。

    scroll***属性(scrollTop、scrollLeft、scrollHeight、scrollWidth): 

      scroll是滚动的意思,也就是scrollWidth、scrollHeight属性代表元素对象真实的宽高,即使有一部分看不到;scrollTop、scrollLeft代表元素对象最顶端/最左端到对象到当前窗口显示的局限内的距顶部/左边距的间隔,也是元素垂直/水平滚动了的距离,或者是元素卷帘卷走的视觉中看不到的部分。

      有两个关系式是(当所有元素的margin均初始化设为0时):

      scrollHeight - scrollTop = clientHeight:当这两个条件成立时,也就代表垂直滚动条走到底了

      scrollWidth - scrollLeft = clientWidth:当这两个条件成立时,也就代表水平滚动条走到底了

    以上就是本人对以上属性元素的理解总结,如有错误之处,烦请指出,大家共同进步。

  • 相关阅读:
    JavaScript 利用 filter+正则表达式对 list进行过滤包括模糊匹配
    odoo恢复数据库后,登录之后,显示空白页的问题
    Vue修改对象的属性值后页面不重新渲染问题
    智慧树(知到)刷课软件更新详情
    【C#】对两张图片进行矩阵运算会怎么样?
    DICOM协议中的UID详解
    DICOM医学文件的解析
    robots.txt协议——网络爬虫的“盗亦有道”
    机器学习算法之Kmeans算法(K均值算法)
    OPENGL shader 知识点
  • 原文地址:https://www.cnblogs.com/momo798/p/5923371.html
Copyright © 2011-2022 走看看