1，element.offsetWidth : 包括 padding 和 边框

2，element.clientWidth : 包括 padding ，不包含边框 ， 内容超出会溢出盒子的时候，就用scrollWidth

3，element.scrollWidth : 不包含边框

主要用法：

1，offset 系列 经常用于获得元素位置 offsetLeft  offsetTop

2，client经常用于获取元素大小， clientWidth , clientHeight

3，scroll经常用于获取滚动距离，scrollTop  scrollLeft

4，注意页面滚动距离 通过 window.pageXoffset  window.pageYoffset 获得

js 元素offset,client , scroll 三大系列总结的更多相关文章

  1. js中 offset /client /scroll总结

    offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...

  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. offset client scroll

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

  5. bom中的offset,client,scroll

    简单明了

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

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

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

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

  8. 三大家族(offset、scroll、client)

    offset.scroll.client三大家族 offset家族 offsetWidth 与 offsetHeight offset 偏移 用于获取元素自身的位置和大小 offsetWidth和of ...

  9. 前端 ---client、offset、scroll系列

    client.offset.scroll系列   1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta c ...

随机推荐

  1. winscp连接后目录名称乱码

    1.点击[编辑](点后变为保存按钮)按钮,高级按钮变为可用,点击[高级] 2.文件名utf-8编码,默认为“自动”,勾选为“开启”

  2. python3笔记五：while语句

    一:学习内容 while语句 while-else语句 while语句练习 二:while语句 1. 格式 while 表达式:    语句 2.逻辑 当程序执行到while语句时,首先计算表达式的值 ...

  3. python利器之切片

     切片 切片的语法表达式为:[start_index : end_index : step],其中: start_index表示起始索引 end_index表示结束索引 step表示步长,步长不能为0 ...

  4. C++面向对象实践

    实践如下: class Person{ private: int age; ]; int hight; public: Person(int age, int hight, char* name); ...

  5. React组件库集锦及学习视频

    [转载]https://www.rails365.net/articles/react-zui-hao-de-ui-zu-jian-ku-ji-jin 这里有一篇讨论,说了哪个才是 React 最好的 ...

  6. EC

  7. 转 Go语言基本类型 —— 字符类型

    https://blog.csdn.net/FHD994603831/article/details/92435724 字符类型Golang中没有专门的字符类型,如果要存储单个字符(字母),一般使用b ...

  8. leetcode 215 第K个最大的元素

    此问题可转化为Top K问题进行考虑,当用小顶堆选出K个最大值时,堆顶的元素即为第k大的元素 class Solution { public: int findKthLargest(vector< ...

  9. Unity3D 打包成Exe文件

    Unity发布后一般都会一个exe文件和_data文件以及UnityPlayer.dll,如果把这三个文件整合成一个exe就可以(装逼)了 首先打开Winrar将这三个压缩: 压缩文件名设置为需要启动 ...

  10. Mysql数据库事务的四大特性：

    什么是事务? 事务Transaction,是指作为一个基本工作单元执行的一系列SQL语句的操作,要么完全地执行,要么完全地都不执行.为什么要使用事务:保证对数据操作的完整性和准确性.1,原子性:一个事 ...