文档章节

随笔:offset、client、scroll的小总结

我的头没你大
 我的头没你大
发布于 2016/12/06 11:31
字数 666
阅读 33
收藏 0

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

这段日子看到scrollTop,突然想起了这三个小兄弟,于是看了很多文章,但发现总结的各有优缺和对错,于是决定自己总结一下,仅当随笔。有错误的欢迎指正。

这些属性均是用于获取页面元素在网页中的位置或相对位置,这里又可以简单的分为两类用途:

           1.获取页面固定元素的位置;2.获取鼠标点击位置

先从页面固定元素的位置说起,用法均是  element.属性名  :

       1.首先还是来说说offset家族吧(offsetWidth、offsetHeight、offsetLeft和offsetTop)

offsetWidth是指元素的宽度(包括元素的边框),或者说元素水平方向上占用的空间大小。

offsetHeight是指元素的高度(包括元素的边框),或者说元素垂直方向上占用的空间大小。

offsetLeft:元素左外边框到  上层元素或左侧元素  之间的距离

offsetTop:元素上外边框到  上层元素或左侧元素  之间的距离

         width和height很好理解,只需注意他是包含边框宽度的;

         关键在于Left和Top很可能有坑会出现,其实目前发现写也就两种情况:

                    1.对于普通元素。就是距离其左侧最近的兄弟元素或父元素的距离

                    2.对于position:absolute 等脱离文档流的,就要看其left和top属性了

        2.client家族 (clientWidth、clientHeight、clientLeft和clientTop

              了解了offset,其实client很简单。

              clientWidth和clientHeight是不含边框厚度的宽高

              clientLeft和ClientTop则能获取到边框的厚度

         3.scroll家族(scrollTop、scrollLeft、scrollWidth和scrollHeight

             正如offset和client在document.body元素上没有什么实际意义不多说了,

             scroll家族 主要用于document.body元素上, 用在页面元素上并没有什么特殊体现

             当页面出现上下或左右滑动条时,scroll的作用就体现出来了:

      document.body.scrollWidth和document.body.scrollHeight就是页面可视区域的大小了,

     document.body.scrollLeft和document.bodyscrollTop就是可视区离整个文档的左、顶侧的距离。

        最后关于这三者的总结就是 :

                    要找某个元素的位置和大小:用elem.offset;

                    要找涉及到元素的边框厚度:用elem.client  ;

                    要涉及到滚轮和可视区大小、距离,用:document.body.scroll ; 

        另外,对于事件对象e的几个获取鼠标位置的属性,是这样的(事件触发时传入并使用):

         相对于屏幕左上角: e.screenX/screenY
         相对于文档显示区左上角: e.clientX/clientY
         相对于所在元素左上角的坐标:e.offsetX/offsetY

              

© 著作权归作者所有

我的头没你大
粉丝 1
博文 6
码字总数 3300
作品 0
杭州
程序员
私信 提问
加载中

评论(0)

JSjs进阶--之JS三大家族:offset家族 Scroll家族 client家族

1.1 三大家族和一个事件对象 三大家族(offset/scroll/client) 事件对象/event (事件被触动时,鼠标和键盘的状态)(通过属性控制) 1.2 Offset家族简介 offset这个单词本身是--偏移,补偿...

osc_ubpucaul
2018/06/16
2
0
JavaScript BOM 操作

BOM 操作 BOM 含义: Brower Object Model 浏览器对象模型 window.open() window.close() 关闭网页 confirm('是否关闭网页!') 弹出确认框 location对象 打开新网址的三种方式 前后端交互的方式...

osc_dfoo6teb
2019/05/01
2
0
前端开发之javascript BOM篇

主要内容: 1、BOM输出 2、BOM的对象 3、client的相关属性 4、offset的相关属性 5、scroll的相关属性 前情提要: 何谓BOM?   所谓 BOM 指的就是浏览器对象模型 Browser Object Model,它的...

osc_v22siqak
2018/08/28
1
0
JS之offset scroll系列

三大系列:offset、scroll、client offset:偏移、补偿、位移 offset 系列是 js 中的一套获取元素尺寸的便捷办法 JS中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括: 获取...

Halukn
2018/05/13
0
0
客户区尺寸client

关于元素尺寸,一般地,有偏移大小offset、客户区大小client和滚动大小scroll。前文已经介绍过偏移属性,后文将介绍scroll滚动大小,本文主要介绍客户区大小client 客户区大小   客户区大小...

jjjssswww
2017/06/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker 安装 MongoDB

MongoDB 是一个免费的开源跨平台面向文档的 NoSQL 数据库程序。 1、查看可用的 MongoDB 版本 访问 MongoDB 镜像库地址: https://hub.docker.com/_/mongo?tab=tags&page=1。 可以通过 Sort b...

osc_gh6k9o49
7分钟前
3
0
PPPoE协议测试——网络测试仪实操

前言: 与传统的接入方式相比,PPPoE具有较高的性能价格比,它在包括小区组网建设等一系列应用中被广泛采用,目前流行的宽带接入方式 ADSL 就使用了PPPoE协议。 随着低成本的宽带技术变得日益...

osc_s4e6jr85
9分钟前
5
0
Flutter动画: Animation动画基础(一)

我的博客 要使用Flutter中动画, 首先要熟悉Flutter的动画基础概念和相关类。 Animation:Flutter中动画的核心类。 AnimationController:动画管理类。 Tween:补间对象,用于计算动画使用的数...

osc_fy59vgpb
10分钟前
5
0
【解决】SX1308无法升压、升压后接上负载电压就被拉低解决办法

一、无法升压? SX1308 能不能正常升压,很大原因取决你的PCB布线!!!我前面画了3次板,都无法正常升压,后面将这些器件经可能放在一起,按照稳定 电容 和器件引脚靠近,SW靠近电感、二极管...

osc_avdbd8s3
12分钟前
5
0
项目管理,资源不足怎么办?

企业的项目管理活动经常会遇到很多挑战,资源不足可能是最常见的一个,也是会引起重大后果的因素之一;项目管理过程中的资源一般指的是人力资源,项目的推进执行需要大量的人力投入,一旦投入...

osc_9piujk2x
13分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部