Client

clientWidth，clientHeight 元素内部的宽度和高度，clientTop，clientLeft 元素内边距到其边框的距离，clientX，clientY相当于浏览器窗口到事件的坐标系

clientWidth，clientHeight 元素的宽度高度都会把内边距计算在内，不包括边框，外边距，滚动条.

clientTop，clientLeft 元素的上边框和左边框的宽度

当元素为行内元素时，clientTop，clientLeft 将返回 0;

当出现滚动条时，两种情况

clientLeft 不计算滚动条宽度

clientLeft 计算滚动条宽度

Offset

offsetWidth，offsetheight 元素大小，offsetTop，offsetLeft 其内边距到与其最近祖先元素的距离（受定位影响），offsetX，offsetY 鼠标最近距定位元素的距离

offsetWidth，offsetheight 获取时不包括外边距，其他都计算在内，包括滚动条

offsetTop，offsetLeft 返回元素边框到offsetParent的边界距离（可能为边框或者内边距）

若元素父元素已定位，即以定位元素获取偏移量，若为未定义，即以body为获取偏移

二者都受定位和浏览器影响

offsetX，offsetY 和Top，Left原理相同

了解Js中的client，offset的更多相关文章

  1. js中常用的offset client screen对象

    javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX offsetWidth //返回元 ...

  2. JS中常用坐标offset、scroll、client的区别

    在IE中scrollWidth:获取对象的滚动宽度scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop ...

  3. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

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

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

  5. 20190430-screen、client、offset、scroll等JS中各种宽度距离

    参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

  6. python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)

    04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...

  7. JS中各种宽度距离小结

    js中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词解释 screen:屏幕.这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该 ...

  8. JavaScript基础（3）-JS中的面向对象、定时器、BOM、位置信息

    一.创建对象的几种常用方式. 1.使用Object或对象字面量创建对象: a.使用Object()内置的构造函数来创建对象,例如: var student = new Object(); // 创建一 ...

  9. JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 分类： JavaScript HTML+CSS 2015-05-27 16:42 635人阅读 评论(0) 收藏

    原文地址:http://caibaojian.com/js-name.html JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词 ...

随机推荐

  1. k8s运行容器之Job（四）

    Job 容器按照持续运行的时间可分为两类:服务类容器和工作类容器. 服务类容器通常持续提供服务,需要一直运行,比如 http server,daemon 等.工作类容器则是一次性任务,比如批处理程序, ...

  2. springcloud一些博文记录

    自己搭建完整demo后看的一个系列博文https://my.oschina.net/u/3375733/following 现在看着这个系列的后期文章估计出差前不会看了 一个博主的系列的git地址和博 ...

  3. ams入门了解

    另一篇介绍文  https://www.cnblogs.com/clds/p/4985893.html 转载自https://www.cnblogs.com/onlysun/p/4533798.htm ...

  4. 现在有T1、T2、T3三个线程，你怎样保证T2在T1执行完后执行，T3在T2执行完后执行？

    Thread t1 = new Thread(new T1()); Thread t2 = new Thread(new T2()); Thread t3 = new Thread(new T3()) ...

  5. Powershell编程基础-004-for语句的使用

    For循环在PowerShell中也称为For语句. 同其他编程语言类似 当指定条件的值为True时,此循环以代码块的形式执行语句,另,For后面接(;;)代表恒为真! 实例1:用于执行指定次数的语句 ...

  6. Docker镜像发布到阿里云

    登录阿里云Docker Registry $ sudo docker login --username=xxx@xxx.com registry.cn-hangzhou.aliyuncs.com 从R ...

  7. 手写：javascript中的关键字new

    简单介绍一下new new再熟悉不过了,new后面跟着构造函数,可以创建对象,这个对象的原型指向构造函数的原型对象,说起来可能有点绕,直接看代码吧 function Person(name, age) ...

  8. spring怎么避免循环依赖

    1.循环依赖 (1)概念 对象依赖分为强依赖和弱依赖: 强依赖指的是一个对象包含了另外一个对象的引用,例如:学生类中包含了课程类,在学生类中存在课程类的引用 创建课程类: @Data public c ...

  9. Python对象的空间边界：独善其身与开放包容

    导读:Python猫是一只喵星来客,它爱地球的一切,特别爱优雅而无所不能的 Python.我是它的人类朋友豌豆花下猫,被授权润色与发表它的文章.如果你是第一次看到这个系列文章,那我强烈建议,请先看看它 ...

  10. mysql-13-auto_increment

    # 标识列 /* 自增长列 可以不用手动的插入值,系统提供默认的序列值 1.标识列必须和 key 搭配使用,比如主键.唯一键.外键 2.一个表至多一个标识列 3.标识列的类型只能是数值型 4.标识列可 ...