今天再次遇到了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. 线性表之顺序存储结构(C语言动态数组实现)

    线性表的定义:N个数据元素的有限序列 线性表从存储结构上分为:顺序存储结构(数组)和 链式存储结构(链表) 顺序存储结构:是用一段连续的内存空间存储表中的数据 L=(a1,a2,a3....an) 链 ...

  2. matlab的cell数组

    matlab的cell数组 元胞数组: 元胞数组是MATLAB的一种特殊数据类型,可以将元胞数组看做一种无所不包的通用矩阵,或者叫做广义矩阵.组成元胞数组的元素可以是任何一种数据类型的常数或者常量,每 ...

  3. QMetaObject感觉跟Delphi的类之类有一拼,好好学一下

    提供了一堆原来C++没有的功能,比如反射什么的...但是可能还是没有Delphi的类之类更强,因为类之类可以“创建类”.可惜我学艺不精,对“类之类”也没有完全学会.先留个爪,有空把两个东西都好好学学, ...

  4. 【Xamain 跨平台机制原理剖析】

    原文:[Xamain 跨平台机制原理剖析] [看了请推荐,推荐满100后,将发补丁地址] Xamarin项目从喊口号到现在,好几个年头了,在内地没有火起来,原因无非有三,1.授权费贵 2.贵 3.原生 ...

  5. Linux os

    进程就是处于执行期的程序(目标代码存放在某种存储介质上,如内存).进程不只局限于可执行代码,还包括其他资源:打开的文件,挂起的信号,内核数据结构,内存地址空间以及至少一个执行线程. 进程是出于执行期的 ...

  6. 移植lrzsz串口文件传输工具到mini2440

    1.下载源码2.解压源码 tar -xzf lrzsz-0.12.20.tar.gz 3.检查配置 ./configure 4.修改Makefile 有三个Makefile需要修改,分别是lrzsz- ...

  7. 使用VisualStudio进行单元测试之三

    私有方法需不需要测试,本文不做讨论.假设您也认为有时候,私有方法也需要进行测试,那就一起来看看如何进行私有方法的测试. 准备测试代码 测试用的代码还是前面测试时使用过的代码,不同之处就是在类中增加了一 ...

  8. Linux给用户增加sudo权限

    有时候我们在Linux下执行sudo的时候,出现 xxx is not int the sudoers file 告诉我们当前用户不是sudoer,所以我们要把当前用户添加进去,步骤如下: 1.进入超 ...

  9. ANDROID Porting系列一、ANDROID编译系统

    译自:http://source.android.com/porting/build_system.html Android使用一个自定义生成系统生成工具,二进制文件和文档.本文档提供了一个建立And ...

  10. Google生活

    本博文的主要内容有 .Google生活的介绍 1.Google生活的介绍 Google生活搜索的官网: http://shenghuo.google.cn/shenghuo/ http://sheng ...