元素offset、client、scroll等系列属性

元素偏移量 offset 系列

offset 概述

offset 翻译过来就是偏移量,我们使用 offset 系列相关属性可以动态地得到该元素的位置(偏移)、大小等

在这里插入图片描述

  • 获得元素距离带有定位父元素的位置。
  • 获得元素自身的大小。
  • 返回的是不带单位的数字型数据
offset 系列常用属性
offset 系列属性描述
element.offsetParent返回该元素带有定位的最近的祖先元素。如果所有祖先元素都没有定位则返回 body 元素。
element.offsetTop返回元素相对带有定位父元素上边框的偏移。
element.offsetLeft返回元素相对带有定位父元素左边框的偏移。
element.offsetWidth返回自身包括 padding、border、content 的总宽度。
element.offsetHeight返回自身包括 padding、border、content 的总高度。
offset 与 style 属性的区别
  • offset 可以得到任意样式表中的样式值,style 只能得到行内样式表的样式值。
  • offset 得到的是不带单位的数字型值,style.width 得到的是带单位的字符串型值。
  • offsetWidth 包含 padding + border + width;style.width 只包含 content 部分。
  • offsetWidth 等属性是只读属性,只能获取并使用不能赋值;style.width是可读写属性,可以获取也可以赋值。

获取元素的大小位置,使用 offset 更合适,要给元素更改值,则需要使用 style 属性更改。

元素可视区 client 系列

client 翻译过来就是客户端的意思,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态地得到该元素边框的大小元素的大小。

在这里插入图片描述

client 系列属性描述
element.clientTop返回元素上边框的大小。
element.clientLeft返回元素左边框的大小。
element.clientWidth返回自身包括 padding、content 的总宽度。
element.clientHeight返回自身包括 padding、content 的总高度。

元素 scroll 系列属性

scroll 即滚动的意思,我们使用 scroll 系列的相关属性可以动态地得到该元素地大小,滚动距离等。

在这里插入图片描述

scroll 系列属性描述
element.scrollTop返回元素被卷去的上侧距离。
element.scrollLeft返回元素被卷去的左侧距离。
element.scrollWidth返回自身内容地实际宽度。
element.scrollHeight返回自身内容的实际高度

被卷去头部的概念:当一个元素设定固定的宽高,但是容纳不下它里面的内容时,我们就要给它设置 overflow 属性。可以隐藏也可以设置滚轮滚动查看内容。当滚动滚轮时元素内部的内容就会有一部分被卷出元素的外部并隐藏,上面被卷出的部分就叫卷去头部。

代码演示:

<!-- 样式略过 -->
<body>
    <div class="boxFather">
        <div class="boxSon">
            <p>1</p>
            <p style="padding-top: 105px;">2</p>
        </div>
    </div>
</body>
<script>
    var boxFather = document.querySelector('.boxFather');
    boxFather.onscroll = function() {
    	// 不断输出被卷去的头部
        console.log(boxFather.scrollTop); 
    }
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nRwpKnBh-1611927022833)(https://s3.ax1x.com/2021/01/29/yiHBj0.gif#pic_center)]

常用场景是浏览器的高度不足以显示整个页面时会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏的高度即页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。
页面被卷去的头部,有兼容性问题,因此被卷去的头部通常有如下几种写法:

  1. 声明了 DTD ,使用 document.documentElement.scrollTop ,即使用 html 文档。
  2. 未声明 DTD ,使用 document.body.scrollTop ,即使用 body 元素。
  3. IE9 开始支持的新方法 window.pageYOffset 和 window.pageXOffset 。
function getScroll() {
	return {
 		left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
 		top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
 };
}
// 使用时可以将这两个值当作是函数 getScroll() 的属性值(函数也是对象)。
var y = getScroll().top;

总结

  • 三个系列的属性返回的都是不带单位的数字型数据。
  • offset 系列经常用于获取元素的位置 offsetLeft offsetTop
  • client 系列经常用于获取元素大小 clientWidth clientHeight
  • scroll 系列经常用于获取滚动距离 scrollTop scrollLeft
  • 页面的滚动距离通过 window.pageYOffset 获得。

与他们有关的三个小案例:模态框放大镜效果实现、回到顶部按钮的显示隐藏。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值