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. lyf基础作业

    include <stdio.h> include <stdlib.h> int main (void) { FILE * fp; int a[10]; int max=0; ...

  2. 黑马lavarel教程---8、session

    黑马lavarel教程---8.session 一.总结 一句话总结: 1.session默认保存在文件中 2.使用的话通过Session门面或者辅助函数 1.lavarel中session的保存方式 ...

  3. 问题：解决上传文件IE浏览器弹出下载框bug？

    控制器方法的返回值必须以String返回,再由js处理转换成json对象   $.ajaxFileUpload({ url: "/project/proj_conver_upload&quo ...

  4. SQL Server高可用实现方案

    名词解释: WSFC:Windows Server Failover Cluster,在Windows Server操作系统上,由WSFC提供高可用性.故障检测和SQL Server AlwaysOn ...

  5. Array 操作

    一.数组拉平 function arrayFlat(arr) { return arr.reduce((pre, cur) => { const temp = Array.isArray(cur ...

  6. leetcode 137单词接龙

    直接层序遍历,结果有部分测试样例超时: class Solution { public: int ladderLength(string beginWord, string endWord, vect ...

  7. 如何在Ubuntu / CentOS 6.x上安装Bugzilla 4.4

    这里,我们将展示如何在一台Ubuntu 14.04或CentOS 6.5/7上安装Bugzilla.Bugzilla是一款基于web,用来记录跟踪缺陷数据库的bug跟踪软件,它同时是一款免费及开源软件 ...

  8. Linux监控命令之==>netstat

    一.命令说明 netstat 命令用于显示本机网络连接.运行端口.路由表等信息 二.参数说明 -a (all):显示一个所有的有效连接信息列表,包括已建立的连接(ESTABLISHED),也包括监听连 ...

  9. Cmake + VS2013编译opencv

    下载之后,使用cmake转为vs解决方案的时候,配置OPENCV_EXTRA_MODULES_PATH=<path to opencv_contrib/modules/>,然后才能使用ex ...

  10. scrapy 正则汉字的提取方法

    [\u4E00-\u9FA5]