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. mongo 生命周期

    监听MongoDB的生命周期,只需重写org.springframework.data.mongodb.core.mapping.event.AbstractMongoEventListener的子类 ...

  2. Java8 Optional && Guava Optional

    Java8 -- Optional boolean isPresent():与obj != null()一样:调用get()前要调用isPresent()检查,不然会报错 Optional的三种构造方 ...

  3. Vue.js---配置开发环境

    首先安装Node.js我就不介绍了! win+r , 输入cmd,回车: 1.安装淘宝镜像 在国内直接使用npm的官方镜像是比较慢的,这里我们采用的是淘宝镜像 npm install -g cnpm ...

  4. luoguP1502过河题解

    日常吐(fei)嘈(hua) 这道题作为最近卡了我3天的dp题(最后还是在题解的帮助下冥思苦想才过掉的题),窝觉得此题肥肠之脑洞,写此博客纪念 题解 过河 先来日常手玩样例: 咦感觉怎么手玩答案都像是 ...

  5. C#三种常用的读取XML文件的方法

    下面我将介绍三种常用的读取XML文件的方法.分别是 1: 使用 XmlDocument 2: 使用 XmlTextReader 3: 使用 Linq to Xml 这里我先创建一个XML文件,名为Bo ...

  6. jqGrid细节备注—jqGrid中自定义格式，URL格式

    本文来自:http://cnn237111.blog.51cto.com/2359144/782137 jqGrid中自定义格式,URL格式 当官方自带的showlink用起来不是十分顺手,因此可以考 ...

  7. C# 虚拟键盘

    [DllImport("user32.dll")] public static extern void keybd_event(byte bVk, byte bScan, uint ...

  8. git 新建项目提交本地项目代码

    git init git remote add origin ssh://git@42.123.127.93:10022/tyshawn/sdap1.git git add . git commit ...

  9. java：反射（Hibernate的雏形）

    * java.lang.Class类:Class类的实例表示正在运行的 Java 应用程序中的类和接口,没有构造方法. java反射机制是在运行状态中,对于任何一个类,都能够知道这个类的所有属性和方法 ...

  10. GIS学习之栅格数据

    栅格数据用一个规则格网来描述与每一个格网单元位置相对应的空间现象特征的位置和取值.在概念上,空间现象的变化由格网单元值的变化来反映.地理信息系统中许多数据都用栅格格式来表示.栅格数据在许多方面是矢量数 ...