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. Struts2拦截器和过滤器的区别？

    ①过滤器依赖于Servlet容器,而拦截器不依赖于Servlet容器. ②Struts2 拦截器只能对Action请求起作用,而过滤器则可以对几乎所 有请求起作用. ③拦截器可以访问 Action上下 ...

  2. LeetCode124----二叉树中最大路径和

    给定一个非空二叉树,返回其最大路径和. 本题中,路径被定义为一条从树中任意节点出发,达到任意节点的序列.该路径至少包含一个节点,且不需要经过根节点. 示例 1: 输入: [1,2,3] 1 / \ 2 ...

  3. 第五周学习总结&实验报告三

    第五周课程总结 1.this和super的区别: this:访问本类中的属性,如果本类没有此属性则从父类中继续查找:访问本类中的方法,如果本类中没有此方法则从父类中继续查找:调用本类构造,必须放在构造 ...

  4. MySQL 建表时 date 类型的默认值设置

    在执行下面 SQL 语句时发现报错 CREATE TABLE `jc_site_access_pages` ( `access_date` date NOT NULL DEFAULT '0000-00 ...

  5. MSTest/NUnit 单元测试 代码覆盖率试用 OpenCover 和ReportGenerator

    VS自带是单元测试代码覆盖率(VS自带这个是最佳选择)需要企业版才有.很蛋疼...... 1.下载安装OpenCover 和ReportGenerator. 关于这2个是干啥的百度下.简单说就是可以分 ...

  6. 趣谈linux操作系统笔记-从BIOS到bootloader

    BIOS 在主板上,有一个东西叫ROM(Read Only Memory,只读存储器).这和咱们平常说的内存RAM(Read Access Memory,随机存取存储器)不同. 而 ROM 是只读的, ...

  7. nodejs之静态文件托管、 路 由、EJS 模板引擎、GET、POST

    1.静态文件托管 静态文件托管:是指对于一个js方法进行封装,提高代码可读性 //fs模块 var fs=require('fs'); //path模块 var path=require('path' ...

  8. git clone 指定分支操作

    服务器迁移,而且原来本地开发是在同一个目录中切换不同的分支,感觉有点挫,于是打算一个文件目录对应一个分支,这样不会有太大的文件差异. 记录下来本次操作,可能以后还会用到. git初始化一般是这样. g ...

  9. Linux 串口调试工具汇总

    minicomminicom 是一款启动速度快,功能强大的串口终端调试工具,当然缺点就是纯字符界面,没有图形界面的调试工具看起来直观方便,但是它功能十分强大,并且在一些没有屏幕的嵌入式主板上运行颇有用 ...

  10. web.xml文件的的param-name

    第一个阶段 配置阶段  web.xml配置,如下图   第二个阶段 初始化阶段  init(ServletConfig config) 1.加载配置文件 获取web.xml文件的的param-name ...