offset家族(只能读取，不能操作)：

offsetLeft:元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离（就是子元素左边框到父元素左边框的距离）。

offsetTop:元素的边框的外边缘距离与已定位的父容器（offsetparent）的上边距离（就是子元素上边框到父元素上边框的距离）。

offsetWidth:描述元素外尺寸宽度，是指元素内容width+padding*2+border*2，不包括margin和滚动条部分。

offsetHeight:描述元素外尺寸高度，是指元素内容height+padding*2+border*2，不包括margin和滚动条部分。

client家族(只能读取，不能操作)：

clientLeft:元素的内边距的外边缘和边框的外边缘的距离，实际就是border-left的宽度

clientTop:同理border-top的宽度

clientWidth: 元素内容width+padding，不包括border、margin、滚动条部分

clientHeight: 元素内容width+padding，不包括border、margin、、滚动条部分

scroll家族(只能读取，不能操作)：

scrollWidth：内容width+padding+加上溢出尺寸，当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等

scrollHeight：同上height+padding+加上溢出尺寸

scrollTop：滚动条上方卷去的高度

scrollLeft：滚动条左边卷去的宽度

js中 offset /client /scroll总结的更多相关文章

  1. js 元素offset,client , scroll 三大系列总结

    1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...

  2. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  3. offset/client/scroll一些总结

    offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...

  4. 了解Js中的client，offset

    Client clientWidth,clientHeight 元素内部的宽度和高度,clientTop,clientLeft 元素内边距到其边框的距离,clientX,clientY相当于浏览器窗口 ...

  5. bom中的offset,client,scroll

    简单明了

  6. offset client scroll

    offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...

  7. JS 中offset 的小bug 与解决方案。

    一.发现bug准备工作,先定义一个div,然后给div加上样式    效果图如图所示: 二.编写正常的代码,同时给div加上一个id     会发现div图会向左缩进...直至消失. 三.添加代码bo ...

  8. JS中client/offset/scroll等的宽高解析

    原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...

  9. JS 中的offset、scroll、client总结

    经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...

随机推荐

  1. vue子组件，同级组件之间的相互引用，以及传值交互

    博客地址:http://blog.csdn.net/wang_meiwei/article/details/75948844

  2. lua --- __newindex 的使用规则

    1.如果 __newindex 是一个函数,在给 table 不存在的字段赋值的时候,会调用这个函数2.如果 __newindex 是一个table,在给 table 不存在的字段赋值的时候,会直接给 ...

  3. if标签

    If标签如果php中if语句的作用,if是用于流程控制的. 在ThinkPHP中if标签也是用于流程控制的. If标签的语法格式: <if condition=’条件表达式’> 输出结果1 ...

  4. [maven] introduction to the standard directory layout

    The next section documents the directory layout expected by Maven and the directory layout created b ...

  5. TCHART FROM DATATABLE

    using System;using System.Collections;using System.ComponentModel;using System.Drawing;using System. ...

  6. 雷林鹏分享：C# 类型转换

    C# 类型转换 类型转换从根本上说是类型铸造,或者说是把数据从一种类型转换为另一种类型.在 C# 中,类型铸造有两种形式: 隐式类型转换 - 这些转换是 C# 默认的以安全方式进行的转换.例如,从小的 ...

  7. Python如何发布程序

    https://blog.csdn.net/wem603947175/article/details/81589729

  8. MySQL数据库索引之B+树

    一.B+树是什么 B+ 树是一种树型数据结构,通常用于数据库和操作系统的文件系统中.B+ 树的特点是能够保持数据稳定有序,其插入与修改操作拥有较稳定的对数时间复杂度.B+ 树元素自底向上插入,这与二叉 ...

  9. linux文件管理之查找

    1 文件查找 1.1 which 查找可执行文件的路径which是通过 PATH环境变量到该路径内查找可执行文件,所以基本的功能是寻找可执行文件[root@www ~]# which [-a] com ...

  10. 20180821ImportContactFromExcel

    Excel创建vcf文件,借助百度云助手导入Iphone6Plus Sub CreateContractList() Set Wb = Application.ThisWorkbook FilePat ...