今天再次遇到了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与padding均初始化设为0时):

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

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

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

js中offsetHeight、clientHeight、scrollHeight等相关属性区分总结的更多相关文章

  1. offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解

    el.offsetHeight = height + padding + border(滚动条是在边框内的,自然也包括在内) el.clientHeight = 可视化看到的高度 (就是content ...

  2. css中的字体及文本相关属性

    css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...

  3. Js中的数据属性和访问器属性

    Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...

  4. 彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight

    测试用例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

    我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...

  6. js中常用的对象—String的属性和方法

    今天说一下,js中常用的内置对象——String对象它有以下几个常用的属性:lengthprototype 有以下几个常用的方法:parseInt()转换为数字parseFloat()转换为数字,支持 ...

  7. js中常用的对象—Array的属性和方法

    今天说一下,js中常用的内置对象——Array对象 Array常用属性: length prototype :给系统对象添加属性和方法 Array常用方法: Array.prototype.sum = ...

  8. js中json对象数组按对象属性排序---1

    转载:https://www.cnblogs.com/jasonwang2y60/p/6656103.html 在实际工作经常会出现这样一个问题:后台返回一个数组中有i个json数据,需要我们根据js ...

  9. js中json对象数组按对象属性排序

    在实际工作经常会出现这样一个问题:后台返回一个数组中有i个json数据,需要我们根据json中某一项进行数组的排序. 例如返回的数据结构大概是这样: { result:[ {id:,name:'中国银 ...

随机推荐

  1. asp.net mvc jqgrid 同一个页面查询不同的表,jqgrid显示不同表的表头和数据并且分页

    基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...

  2. Android项目无法运行的解决方法

    文件本身是否有问题 有两种方法可以判断:1.比较快捷的办法就是用解压软件打开或者解压的过程中有没有弹出什么错误提示,如果有错误提示那就重新下载一遍文件(javaapk用的压缩工具是winrar4.0, ...

  3. java rest接口返回不完整的json数据

    ngix配置有问题,数据量大时把部分数据给拦截了. {"userId":237,"loginName":"mingshi","us ...

  4. C读写配置文件

    在项目开发中,经常需要读取应用配置文件的初始化参数,用于应用在启动前进行一些初始化配置.比如:Eclipse,参数项包含主题.字体大小.颜色.Jdk安装位置.自动提示等.Eclispe配置的文件格式是 ...

  5. quartz定时任务时间配置

    quartz定时任务时间设置描述(2011-03-03 16:23:50)转载▼标签: quartz时间it 分类: 凌乱小记  这些星号由左到右按顺序代表 :     *    *     *    ...

  6. HTML+js+css实现点击图片弹出上传文件窗口的两种思路

    第一种:CSS实现 <style><!-- .fileInputContainer{        height:256px;        background:url(upfil ...

  7. Spark MLBase分布式机器学习系统入门:以MLlib实现Kmeans聚类算法

    1.什么是MLBaseMLBase是Spark生态圈的一部分,专注于机器学习,包含三个组件:MLlib.MLI.ML Optimizer. ML Optimizer: This layer aims ...

  8. JQuery中如何click中传递参数

    代码如下: click(data,fn)中的data其实是json对象,取的时候,只能通过当前的事件源来取,data是默认放在event中的,所以这里的data是eventdata,引用的时候也使用e ...

  9. 有关Spring Batch

    在使用Spring Batch时,在无法实现StepListener的情况下,如何使用ExecutionContext呢. 解决办法,使用宣言@BeforeStep或@AfterStep.

  10. TSSAO Temporal Screen-Space Ambient Occlusion (Unity3d 5 示例实现)

    前提 环境光(ambient occlusion)是一种GI,其简化形式SSAO可以用“微量高效”来形容,消耗得很少,得到的效果很好.环 境光遮蔽(ambient occlusion)的本质是计算在一 ...