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. Docker端口映射及创建镜像演示（二）

    Docker暴露容器方法 第一种:将容器中的一个端口映射成宿主机中的一个随机端口 第二种:将容器中的一个端口映射成宿主机中的一个端口 第三种:将容器中的一个端口映射成宿主机中的一个特定网卡上的随机端口 ...

  2. cnblog维护

    title: 博客归纳 blog: CSDN data: Java学习路线及视频 2019 12/31 时间管理 2020 1/22 Git是什么? 1/23 Git安装--Windows 3/24 ...

  3. ScheduledExecutorService定时任务学习

    scheduleAtFixedRate :每隔Xs执行任务 scheduleWithFixedDelay :上轮任务结束后的Xs后执行下次任务 如下是测试代码,就是at和with方法不同 public ...

  4. 再见了SpringMVC！这个框架有点厉害，甚至干掉了Servlet！

    # 前言 对 Java 开发者来说, Spring 发布 5.0 正式版,而新版 Spring 的一大特色,就是 Reactive Web 方案 Web Flux,这是用来替代 Spring Web ...

  5. TypeScript之父：JS不是竞争对手，曾在惧怕开源的微软文化中艰难求生

    开源的 TypeScript 也曾在微软内部遭到抵制,但如今 TypeScript 已经成为 Web 应用构建的主流语言.   微软的开源编程语言 TypeScript 是 JavaScript 的一 ...

  6. cnpm install 报错

    报错如图所示,请观下文 1,npm cache clean --force 2,进入文件,rm -rf node_modules/ ---- 暴力直接

  7. Flutter音频播放--chewie_player的基本使用（二）——样式修改

    先贴修改图,只改了部分布局与样式 官方的demo并不十分适合我的需求,从组件进入chewie_player并没有查看到相应的布局,那么直接从chewie的依赖包进入 可以看到以下的目录结构: 我主要修 ...

  8. 大白话谈JVM的类加载机制

    前言 我们很多小伙伴平时都是做JAVA开发的,那么作为一名合格的工程师,你是否有仔细的思考过JVM的运行原理呢. 如果懂得了JVM的运行原理和内存模型,像是一些JVM调优.垃圾回收机制等等的问题我们才 ...

  9. Jaskson精讲第7篇-类继承关系下的JSON序列化与反序列化JsonTypeInfo

    Jackson是Spring Boot(SpringBoot)默认的JSON数据处理框架,但是其并不依赖于任何的Spring 库.有的小伙伴以为Jackson只能在Spring框架内使用,其实不是的, ...

  10. 2020 Java开发者数据分析：中国已成为 Java 第一大国

    最近知名开发工具供应商Jetbrains在Java 25周年之际,对开发群体做了一次有意思的数据分析. 全文内容可见:https://blog.jetbrains.com/idea/2020/09/a ...