1.元素偏移量offset系列
1.1offset概述
offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小(宽度高度)
- 注意:返回的数值不带单位
offset系列常用属性
1.2 offset与style区别
offset | style |
可以 得到任意样式表 中的样式值 | 只能 得到行内样式表 中的样式值 |
offset系列获得的数值是没有单位的 | style.width获得的是带有单位的字符串 |
offsetWidth= padding+border+width | style.width = width |
offsetWidth等属性只是读属性,只能获取,不能赋值 | style.width是可读写属性,可以获取也可以赋值 |
想要获取元素大小位置,用offset更合适 | 想要给元素更改值 ,style更合适 |
案例:获取鼠标在盒子内的坐标
<div class="box"></div>
<script>
var box = document.querySelector('.box');
box.addEventListener('mousemove', function (e) {
//x = 鼠标在页面的x值 - 盒子在页面的x值
// y = 鼠标在页面的y值 - 盒子在页面的y值
var x = e.pageX - box.offsetLeft;
var y = e.pageY - box.offsetTop;
box.innerHTML = 'x坐标为'+ x+ ' ' +'y坐标为'+y ;
})
</script>