offsetHeight、offsetWidth、offsetLeft、offsetTop
clientHeight、clientWidth、clientLeft、clientTop
scrollHeight、scrollWidth、scrollLeft、scrollTop
这些属性每一个都非常的眼熟，好像知道都是干啥的，但是又不是特别知道。 不是非常清楚它们之间的区别。
下面我们结合图片和文字来重新认识一下这些似曾相识的属性。
offset系列
offset翻译过来就是偏移量，我们借助offset的相关属性可以动态的得到目标元素的位置、大小信息。
常用属性如下
| 属性 | 作用 |
|---|---|
| element.offsetParent | 返回作用该元素带有定位的父级元素 如果父级元素都没有定位则返回body |
| element.offsetTop | 返回当前元素距离带有定位的父元素上方的距离（如果无父元素或者父元素无定位则返回body的距离） |
| element.offsetLeft | 返回当前元素距离带有定位的父元素左边的距离（如果无父元素或者父元素无定位则返回body的距离） |
| element.offsetWidth | 返回模板元素的宽度（padding+border+自身宽度） |
| element.offsetHeight | 返回模板元素的高度（padding+border+自身高度） |
注意：通过以上方法获取的数1据均不带单位
当父元素具有定位时，offsetTop和offsetLeft表现形式如下
offset和style的区别
通过element.style同样可以获取到元素的宽高属性，那么style和offset有什么区别呢
| offset的特点 | style的特点 |
|---|---|
| offset可以得到任意样式表中的样式值 | style只能得到行内样式表中的样式值 |
| offset系列获得的数值是没有单位的（数值） | style.widht获取到的值是具有单位的（100px 字符串） |
| offsetWidth等属性是只读的 | style.width的属性是可赋值的 |
| offsetWidth包含padding+border+width | style.widht不包含padding和border |
通过以上总结可得，当我们想要获取元素大小位置时，使用offset更合适
当我们想要改变元素的相关属性时，使用style更为合适
client系列
使用client相关属性也可以获取到元素可视区的相关信息。常用的属性如下
| client系列属性 | 作用 |
|---|---|
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回元素宽度（padding+width） |
| element.clientHeight | 返回元素高度（padding+height） |
通过上方属性可知，client与offset的主要区别就是clientWidth和clientHeight返回的值不包括border。 专门提供了clientTop和clientLeft这两个属性来获取边框的相关信息
Scroll系列
scroll系列的相关属性在开发中也经常会用到，动态的获取元素的大小，滚动距离
| scroll系列属性 | 作用 |
|---|---|
| element.scrollTop | 返回被卷去的上侧距离(可修改) |
| element.scrollleft | 返回被卷去的左侧距离(可修改) |
| element.scrollWidth | 返回自身实际的宽度，不含边框 |
| element.scrollHeight | 返回自身实际宽度，不含边框 |
图解
快速找到导致出现滚动条的元素
function findscroller(element){
element.onscroll=function () {
console.log(element)
}
Array.from(element.children).forEach(findscroller)
}
findscroller(document.body)
element.scrollTo({
top: 100,
left: 100,
behavior: 'smooth'
});
offset、client、scroll相关属性总结
-
offset系列经常用于获取元素的位置 offsetLeft offsetTop
-
client经常用于获取元素大小 clientWidth clientHeight
-
scroll经常用于获取滚动距离 scrollTop scrollLeft
-
想要修改元素的大小相关属性时，使用style直接修改
-
注意监听页面滚动距离要使用window.pageXOffset获取
element.scrollIntoView({ behavior: 'smooth' })
scrollIntoView 让element出现在窗口可视区域
在开发中经常会遇到这样的需求
当表单校验失败时，让校验失败的表单项出现在窗口可视范围内。借助scrollIntoView方法可以轻松实现该效果
使用方法如下
const element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
表单校验错误滚动到首个错误的元素 参数为所有错误元素的数组
export const errorScroll = (element) => {
if (element && element.length) {
let target = element[0].parentElement;
target.scrollIntoView && target.scrollIntoView({ behavior: 'smooth' });
}
};
saveSalaryInfo() {
//基本信息成功跳转到第二步
this.$refs['basicInfoForm'].validate(valid => {
if (valid) {
// 发送请求
} else {
this.$nextTick(() => {
this.errorScroll(
document.querySelectorAll('div.el-form-item__error')
)
})
}
获取鼠标的坐标
鼠标的坐标有以下这几种，通过事件的event对象获取
- clientX/clientY:鼠标在页面上可视区域的位置是从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化。（不兼容Safari）
- offsetX/offsetY:鼠标以当前事件的目标对象左上角为原点，来定位。（不支持Mozilla）
- PageX/PageX:鼠标在页面上的位置,是以document对象为参考点，即当前整个网址页面为参考点。（不支持IE）
- screenX/screenY：鼠标以计算机屏幕为原点，来定位。（主流浏览器都支持）
- layerX/layerY：鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点。（只支持Mozilla，Safari）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
background-color: pink;
}
</style>
</head>
<body>
<div>
</div>
<script>
var div=document.querySelector('div');
div.addEventListener('mousemove' , function (e) {
console.log('e.clientX=',e.clientX,"-----","e.clientY=",e.clientY)
console.log('e.offsetX=',e.offsetX,"-----","e.offsetY=",e.offsetY)
console.log('e.PageX=',e.pageX,"-----","e.PageY=",e.pageY)
console.log('e.screenX=',e.screenX,"-----","e.screenY=",e.screenY)
console.log('e.layerX=',e.layerX,"-----","e.layerY=",e.layerY)
console.log('---------------------------------------------------------')
var x= e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
div.innerHTML='距离左侧'+x+'距离顶部'+y;
})
</script>
</body>
</html>