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. Value '0000-00-00' can not be represented as java.sql.Date解决办法

    java.sql.SQLException: Value '0000-00-00 00:00:00' can not be represented as java.sql.Timestamp 问题描述 ...

  2. shell编程连接postgres数据库（数据备份）

    第一步:通过xshell或者其他工具连接到linux服务, 第二步:创建一个脚本:touch se.sh 第三步:输入i,代表开始输入内容 输入以下命令: 脚本如下:(sql语句可以是任何复杂的sql ...

  3. RocketMQ存储系统概要设计和源码解读

    普遍消息存储技术的选型 分布式KV存储 NewSQL存储:TiDB 文件系统:RocketMQ,kafka,RabbitMQ RocketMQ:所有的message存储在一个log里,不区分topic ...

  4. ubuntu环境配置终极解答

    1. ubuntu中常用的5个配置文件 1)/etc/profile 2)/etc/environment 环境变量在这个文件中定义,可以用vim /etc/environment查看该文件内容 3) ...

  5. 线程同步synchronized理解

    Synchronized 理解 用法:1.同步方法.2.同步静态方法.3同步代码块. 理解Synchronized 的关键是“锁” (原理在最后) 同步代码有“锁”者执行.所谓的锁必须是同一个.静态的 ...

  6. 三种CSS样式

    内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 内联式css样式表就是把css代码直接 ...

  7. OpenCV学习笔记(5)——颜色空间转换

    学习如歌对图像进行颜色空间转换,从BGR到灰度图,或者从BGR到HSV等 创建一个程序用来从一幅图像中获取某个特定颜色的物体 1.转换颜色空间 OpenCV中有超过150种进行颜色空间转化的方法,但是 ...

  8. 浏览器端-W3School-JavaScript：JavaScript String 对象

    ylbtech-浏览器端-W3School-JavaScript:JavaScript String 对象 1.返回顶部 1. JavaScript String 对象 String 对象 Strin ...

  9. ControlTemplate in WPF —— ListBox

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...

  10. Spring Cloud负载均衡：使用zuul作服务器端负载均衡

    1.目的: 本文简述Spring Cloud负载均衡之服务器负载均衡模式,使用组件为zuul. zuul作为Spring Cloud中的网关组件,负责路由转发.身份验证.请求过滤等等功能,那么我们可以 ...