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. java 调用腾讯云短信api

    依赖: <!--腾讯短信依赖--> <dependency> <groupId>com.github.qcloudsms</groupId> <a ...

  2. spring整合之后运行报什么只读错误。Write operations are not allowed in read-only mode (FlushMode.MANUAL): Turn your Session into FlushMode.COMMIT/AUTO or remove 'readOnly' marker from transaction definition.

    解决办法, 再大dao的实现类上添加注解: @Transactional(readOnly = false ) 不让它只读就行了

  3. idea 下运行安卓项目

    修改 gralde 路径修改安卓sdk路径进入project structure 设置 Project settings / Project /project SDK 选择 Android API 2 ...

  4. JS给XMLHttpRequest添加filter

    function XMLHttpRequestFilter(){ let base = XMLHttpRequest.prototype.open; let filter_list = []; let ...

  5. Gradle项目构建工具学习笔记（持续更新中。。。）

    1.gradle的安装 1)从官网下载gradle,然后解压 2)在系统环境变量新建GRADLE_HOME 3)将%GRADLE_HOME%\bin加入PATH中 2.验证是否安装成功 gradle ...

  6. Python学习笔记：关于脚本文件中的 if __name__ = '__main__'

    这两天自己写了一个Python脚本文件,但是直接运行这个.py之后发现里面的函数并没有执行,参考别人的代码之后,发现原来要加入以下代码: if name == 'main': 函数名1 函数名2 .. ...

  7. dell 9代cpu新机器安装centos7.7 bios 配置

    1.步骤如下,按f2或f12选择进入bios,每一步配置的内容如图所示,U盘写镜像,引导U盘启动,安装.(电源管理自启动那几个步骤可以不做)

  8. http请求状态码解析

    1xx(临时响应) 2xx(成功) 3xx(重定向) 4xx(请求错误) http状态码 400 (错误请求) 服务器不理解请求的语法. http状态码 401 (未授权) 请求要求身份验证. 对于需 ...

  9. apache通过rewrite限制某个目录

    1.<IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTP_URI} ^.*/tmp/* [NC] RewriteRule ...

  10. Python学习之==>数组（二）

    1.切片 # 切片:是list取值的一种方式 nums = ['段佳琳','陈伟良','王占宇','李波','韶钢'] print(nums[1:3]) # 顾头不顾尾,不包含后面下标的元素 prin ...