三大家族scroll、offset、client
三大家族scroll、offset、client
JS的三大家族主要是Offset、Scroll、Client,通过对三大家族不同属性的灵活使用,我们可以模拟出很多炫酷的JS动画,增强界面的视觉感染力!让静态页面活起来!
注意以下的值全是不带px的,单纯的数字
对于clientX、clientY、offsetX、offsetY已在鼠标事件记录过
1.scroll家族
1.1 scrollHeight和scrollWidth(只读)
获取元素整个内容的高度和宽度 (包含看不见的) ,如果有滚动条(滚动条会占用部分宽高),不计算滚动条的宽高
Element.scrollHeight
属性返回一个整数值(小数会四舍五入),表示当前元素的总高度(单位像素),包括溢出容器、当前不可见的部分。它包括padding
,但是不包括border
、margin
以及水平滚动条的高度(如果有水平滚动条的话),还包括伪元素(::before
或::after
)的高度。
Element.scrollWidth
属性表示当前元素的总宽度(单位像素),其他地方都与scrollHeight
属性类似。这两个属性只读。
整张网页的总高度可以从document.documentElement
或document.body
上读取。
// 返回网页的总高度
document.documentElement.scrollHeight
document.body.scrollHeight
注意,如果元素节点的内容出现溢出,即使溢出的内容是隐藏的,scrollHeight
属性仍然返回元素的总高度。
// HTML 代码如下
// <div id="myDiv" style="height: 200px; overflow: hidden;">...<div>
document.getElementById('myDiv').scrollHeight // 356
上面代码中,即使myDiv
元素的 CSS 高度只有200像素,且溢出部分不可见,但是scrollHeight
仍然会返回该元素的原始高度。
1.2 scrollTop和scrollLeft(可修改)
获取元素垂直和水平滚动条滚动的距离(被卷去的头部和左侧)
Element.scrollLeft
属性表示当前元素的水平滚动条向右侧滚动的像素数量,Element.scrollTop
属性表示当前元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素,这两个属性总是等于0。
如果要查看整张网页的水平的和垂直的滚动距离,要从document.documentElement
元素上读取。
document.documentElement.scrollLeft
document.documentElement.scrollTop
这两个属性都可读写,设置该属性的值(不需要单位),会导致浏览器将当前元素自动滚动到相应的位置。
2.offset家族
2.1 offsetHeight和offsetWidth
获取盒子的高度宽度,包括内容区、内边距、边框(这里就是css设置的那些样式组合)
Element.offsetHeight
属性返回一个整数,表示元素的 CSS 垂直高度(单位像素),包括元素本身的高度、padding 和 border,以及水平滚动条的高度(如果存在滚动条)。
Element.offsetWidth
属性表示元素的 CSS 水平宽度(单位像素),其他都与Element.offsetHeight
一致。
这两个属性都是只读属性,只比Element.clientHeight
和Element.clientWidth
多了边框的高度或宽度。如果元素的 CSS 设为不可见(比如display: none;
),则返回0
。
2.2 offsetParent
Element.offsetParent
属性返回最靠近当前元素的、并且 CSS 的position
属性不等于static
的上层元素。
<div style="position: absolute;"><p><span>Hello</span></p>
</div>
上面代码中,span
元素的offsetParent
属性就是div
元素。
该属性主要用于确定子元素位置偏移的计算基准,Element.offsetTop
和Element.offsetLeft
就是offsetParent
元素计算的。
如果该元素是不可见的(display
属性为none
),或者位置是固定的(position
属性为fixed
),则offsetParent
属性返回null
。
<div style="position: absolute;"><p><span style="display: none;">Hello</span></p>
</div>
上面代码中,span
元素的offsetParent
属性是null
。
如果某个元素的所有上层节点的position
属性都是static
,则Element.offsetParent
属性指向<body>
元素。
2.3 offsetLeft和offsetTop(只读)
当前元素和定位父元素之间的偏移量(如果没有设置定位父元素,就是相对于左上角的位置,top是距离顶部的距离,left是最左边的距离) offsetLeft水平偏移量 offsetTop垂直偏移量
Element.offsetLeft
返回当前元素左上角相对于最近的开启了定位的节点的水平位移,Element.offsetTop
返回垂直位移,单位为像素。通常,这两个值是指相对于父节点的位移。
下面的代码可以算出元素左上角相对于整张网页的坐标。
function getElementPosition(e) {var x = 0;var y = 0;while (e !== null){x += e.offsetLeft;y += e.offsetTop;e = e.offsetParent;}return {x: x, y: y};
}
3.client家族
3.1 clientHeight和clientWidth(不包含滚动条)
元素的可见高度,包括元素的内容区和内边距的高度 元素的可见宽度,包括元素的内容区和内边距的宽度
Element.clientHeight
属性返回一个整数值,表示元素节点的 CSS 高度(单位像素),只对块级元素生效,对于行内元素返回0
。如果块级元素没有设置 CSS 高度,则返回实际高度。
除了元素本身的高度,它还包括padding
部分,但是不包括border
、margin
。如果有水平滚动条,还要减去水平滚动条的高度。注意,这个值始终是整数,如果是小数会被四舍五入。
Element.clientWidth
属性返回元素节点的 CSS 宽度,同样只对块级元素有效,也是只包括元素本身的宽度和padding
,如果有垂直滚动条,还要减去垂直滚动条的宽度。
document.documentElement
的clientHeight
属性,返回当前视口的高度(即浏览器窗口的高度),等同于window.innerHeight
属性减去水平滚动条的高度(如果有的话)。document.body
的高度则是网页的实际高度。一般来说,document.body.clientHeight
大于document.documentElement.clientHeight
。
// 视口高度
document.documentElement.clientHeight// 网页总高度
document.body.clientHeight
3.2 clientLeft和ClientTop
边框宽度和边框的高度
Element.clientLeft
属性等于元素节点左边框(left border)的宽度(单位像素),不包括左侧的padding
和margin
。如果没有设置左边框,或者是行内元素(display: inline
),该属性返回0
。该属性总是返回整数值,如果是小数,会四舍五入。
Element.clientTop
属性等于网页元素顶部边框的宽度(单位像素),其他特点都与clientLeft
相同。
判断滚动条是否滚动到底 垂直滚动条 scrollHeight -scrollTop = clientHeight
水平滚动 scrollWidth -scrollLeft = clientWidth
检查浏览器宽高(可视区域)兼容性写法
//获取屏幕可视区域的宽高function client(){if(window.innerHeight !== undefined){return {"width": window.innerWidth,"height": window.innerHeight}}else if(document.compatMode === "CSS1Compat"){return {"width": document.documentElement.clientWidth,"height": document.documentElement.clientHeight}}else{return {"width": document.body.clientWidth,"height": document.body.clientHeight}}}//需求:浏览器每次更改大小,判断是否符合某一标准然后给背景上色。 >960红色,大于640小于960蓝色,小于640绿色。//步骤://1.老三步//2.判断。//3.上色//1.老三步window.onresize = fn;//页面加载的时候直接执行一次函数,确定浏览器可视区域的宽,给背景上色fn();//封装成函数,然后指定的时候去调用和绑定函数名function fn() {//2.判断。//3.上色if(client().width>960){document.body.style.backgroundColor = "red";}else if(client().width>640){document.body.style.backgroundColor = "blue";}else{document.body.style.backgroundColor = "green";}}
4.getBoundingClientRect()方法
getBoundingClientRect()获取元素位置,这个方法没有参数
getBoundingClientRect()用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。
getBoundingClientRect()是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。
var rect = obj.getBoundingClientRect();
上面代码中,getBoundingClientRect
方法返回的rect
对象,具有以下属性(全部为只读)。
x
:元素左上角相对于视口的横坐标y
:元素左上角相对于视口的纵坐标height
:元素高度width
:元素宽度left
:元素左上角相对于视口的横坐标,与x
属性相等right
:元素右边界相对于左边视口的横坐标(等于x + width
)top
:元素顶部相对于视口的纵坐标,与y
属性相等bottom
:元素底部相对于上边视口的纵坐标(等于y + height
)
由于元素相对于视口(viewport)的位置,会随着页面滚动变化,因此表示位置的四个属性值,都不是固定不变的。如果想得到绝对位置,可以将left
属性加上window.scrollX
,top
属性加上window.scrollY
。
注意,getBoundingClientRect
方法的所有属性,都把边框(border
属性)算作元素的一部分。也就是说,都是从边框外缘的各个点来计算。因此,width
和height
包括了元素本身 + padding
+ border
。
5.总结
三大家族区别
- offset家族 offsetHeight: 元素高,height+border+padding offsetWidth: 元素宽,width+border+padding offsetTop: 上边距离带有定位的父盒子的距离(重要) offsetLeft: 左边距离带有定位的父盒子的距离(重要) offsetParent: 最近的带有定位的父盒子
- scroll家族 scrollHeight: 内容高,不含border scrollWidth: 内容宽,不含border scrollTop: document.documentELement.scrollTop || document.body.scrollTop; (重要)window.pageXOffset; 浏览器页面被卷去的头部 元素调用.必须具有滚动条的盒子调用。盒子本身遮挡住的子盒子内容。 子盒子被遮挡住的头部 scrollLeft: document.documentELement.scrollLeft: || document.body.scrollLeft: ; (重要)window.pageYOffset; 浏览器页面被卷去的左侧 元素调用.必须具有滚动条的盒子调用。盒子本身遮挡住的子盒子内容。 子盒子被遮挡住的左侧
- client家族 clientHeight: 元素高,height+padding; window.innerHeight; document.body.clientHeight 可视区域的高 clientWidth: 元素宽,width+padding; window.innerWidth; document.documentElementWidth; 可视区域的宽 clientTop: 元素的上border宽 clientLeft: 元素的左border宽 clientY 调用者:event.clientY(event)(重要) 作用:鼠标距离浏览器可视区域的距离,上 clientX 调用者:event.clientX(event)(重要) 作用:鼠标距离浏览器可视区域的距离,左
最后
整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。
有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享
部分文档展示:
文章篇幅有限,后面的内容就不一一展示了
有需要的小伙伴,可以点下方卡片免费领取
三大家族scroll、offset、client相关推荐
- js 三大家族(offset/scroll/client)
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
- 原生JS中的三大家族(offset/scroll/client)与jQuery中对应的方法
JS中的offset家族: 一.offsetEWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽 ...
- 三大系列总结(offset client scroll)
元素偏移量offset offset概述 获得元素距离带有定位父元素的位置 如果子元素没有父亲或者父元素没有定位,则以body为准 获得元素自身的大小(包含padding+border+width) ...
- js的三大家族(offset/scroll/client)和一个事件对象(event)///正则
一 offset 第1章 offset家族 4 1.1 三大家族和一个事件对象 4 1.2 Offset家族简介 4 1.2.1 offsetWidth和offsetHi ...
- BOM对象及offset、client、scroll三大家族
文章目录 BOM对象 1. location 对象 location 对象 的常用属性 案例 location对象的常见方法 2. navigator对象 3.history对象 history对象常 ...
- extjs中滚动条属性_十分钟快速了解 JS 中的 offset、scroll、client
(给前端大全加星标,提升前端技能) 作者:前端下午茶 公号 / SHERlocked93 在下开发中经常碰到 offset.scroll.client 这几个关键字,比如 offsetLeft.of ...
- offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
- .net label在父容器中占两行显示_十分钟快速了解 JS 中的 offset、scroll、client
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
- javaScript中三大家族总结
三大家族整体解释图 第一大家族:offset家族 offset 是自己的-- 目的: 方便的获取元素尺寸 offsetWidth offsetHeight 得到对象的宽度和高度(自己的,与他人无关) ...
最新文章
- 诺基亚发布首款高功率小基站SCORE以及Flexi Zone LWA支持能力
- csharp DataTable and DataGridView delete a Row
- Windows进程与线程学习笔记(七)—— 时间片管理
- 致敬百年南开!南开大学作译者30本必读经典著作
- 第三只眼使用局域网版本还是网络版好_iOS13.4测试版使用3天后,发现3个优化,建议升级!...
- mysql pconnect_mysql_pconnect()
- 基于php校园失物招领,校园失物招领系统设计
- 腾讯企业邮箱外域邮件发送失败原因及其解决方案
- 金蝶EAS BOS开发常用的代码说明及常见问题
- 架构之路(五):忘记数据库
- 【POJ1050+POJ2018+HDOJ6638+牛客1006D】最大子段和问题
- PBRT v3看完了
- 解决没有配置本地nacos但是一直发生localhost8848连接异常的问题
- 华为ensp模拟校园网/企业网实例(附完整设备配置命令和ensp项目)
- 计算机硬盘空间不都用,搞不懂的磁盘占用100% 自检一遍全解决
- Google高级搜索
- 玉米田 组合数学 环涂色
- 使用Python来编写一个简单的感知机
- 麒麟操作系统+龙心 编译qt-arm
- 芯片级封装LED(CSP+LED)行业调研报告 - 市场现状分析与发展前景预测