亩地免安装绿色中文版
2.33G · 2025-10-21
元素偏移量 offset 系列
元素可视区 client 系列
元素滚动 scroll 系列
offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
获得元素距离带有定位父元素的位置
获得元素自身的大小(宽度高度)
注意:返回的数值都不带单位
案例分析:
1). 我们在盒子内点击,想要得到鼠标距离盒子左右的距离。
2). 首先得到鼠标在页面中的坐标(e.pageX, e.pageY)
3). 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)
4). 用鼠标距离页面的坐标减去盒子在页面中的距离,得到 鼠标在盒子内的坐标
5). 如果想要移动一下鼠标,就要获取最新的坐标,使用鼠标移动
代码实现:
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
margin: 200px;
}
</style>
<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})
</script>
</body>
client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。
通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
offset系列 经常用于获得元素位置 offsetLeft offsetTop
client 经常用于获取元素大小 clientWidth clientHeight
scroll 经常用于获取滚动距离 scrollTop scrollLeft
注意页面滚动的距离通过 window.pageXOffset 获得
十铨推出 NV10000 固态硬盘:M.2 2280 PCIe 5.0×4 NVMe,10G 顺序读取
卢伟冰宣布陈奕迅成为 REDMI 声学大使,K90 Pro Max 手机搭载 2.1 立体声系统