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. TCP与UDP各自优缺点与区别

    TCP的优点: 可靠,稳定 TCP的可靠体现在TCP在传递数据之前,会有三次握手来建立连接,而且在数据传递时,有确认.窗口.重传.拥塞控制机制,在数据传完后,还会断开连接用来节约系统资源. TCP的缺 ...

  2. 用C#二次封装虹软arcface

    相信很多用C#又想用虹软的SDK的童鞋要花很多心思去研究怎么转换,所以写了一篇文章和一个demo方便用C#的童鞋方便调用虹软的接口,文章的地址是:https://blog.xgcos.com/show ...

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

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

  4. 优雅地记录Python程序日志1：logging模块简介

    本文摘自:https://zhuanlan.zhihu.com/p/31893724 本篇涉及: logging模块的调用: 保存log日志为文件: 调整输入日志等级: 修改日志消息格式: 前言 在使 ...

  5. C#动态代理

    所谓代理,就是不直接访问目标对象,而是由中间对象生成一个目标代理类,由中间代理对象来代理目标对象的方法.Java里面有JDK和CGLIB代理.C#里面则使用Castle代理.nuget引用如下: &l ...

  6. PHP数组排序函数有哪些

    PHP数组排序函数有哪些 一.总结 一句话总结:其实也就是是否保持索引,对键排序还是对值排序,除了sort,rsort.shuffle,usort外,都是保持索引的 是否保持索引 键排序 值排序 除了 ...

  7. docker 安装完mysql 后客户端无法访问

    1.在虚拟机的centos 中安装 docker 的mysql 镜像. docker run --name mysql01 -p 3306:3306 -e MYSQL_ROOT_PASSWORD=12 ...

  8. Javascript的常见数据类型以及相应操作

    JavaScript概述 1 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织E ...

  9. List<String> 和 ArrayList<String>的区别（转载）

    最近对这两个问题比较懵逼,关于List和ArrayList.List<String> list = new ArrayList<String>(); 好了,先搞明白List 和 ...

  10. spring boot(十五)spring boot+thymeleaf+jpa增删改查示例

    快速上手 配置文件 pom包配置 pom包里面添加jpa和thymeleaf的相关包引用 <dependency> <groupId>org.springframework.b ...