元素offsetXxx，clientXxx，scrollXxx，鼠标screenX,clientX

本文主要是介绍元素offsetXxx，clientXxx，scrollXxx，鼠标screenX,clientX，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

注意: 很多标签都自带初始样式属性值，这容易使布局达不到预期效果，为避免不必要麻烦，在css中利用通配符 “ * ” 设置统一样式

*{border:0;padding:0;margin:0;
}

1. 属性说明：

内容仅个人简单测试后归纳的，测试的代码在下面（“ 2. 测试示例：”）有需要可以自己复制粘贴后自己去测试总结。
除scrollTop和scrollLeft外其余属性都是只读

		offsetTop = 与最近一个已定位父元素内顶部的距离offsetTop = 没有定位的父元素时：则是到<html>标签顶部的距离(如果设置了html和body的border则需加入<html>标签border的大小--也别忽略了<body>标签的)非必要不动body和html的样式offseLeft ...offsetWidth = 左右border+左右padding+widthoffsetHeight = 上下border+上下padding+heightclientLeft = border(左边框)clientTop = border(上边框)clientWidth = width-左滚动条宽度(如果有)+左右paddingclientHeight = height-底部滚动条宽度(如果有)+上下padding滚动条的width = offsetWidth - clientWidth - 左右border滚动条会占用widthscrollTop = 元素内容超出上边界内容部分的高度（不考虑border的大小）scrollLeft = 元素内容超出左边界内容部分的宽度（不考虑border的大小）scrollHeight = padding+内容最大高度        (滚动条从头滑到尾过程中所有内容变化部分)scrollWidth = padding+内容最大宽度			(滚动条从头滑到尾过程中所有内容变化部分)**鼠标事件的相关距离**screenX = 鼠标到屏幕的水平距离screenY = 鼠标到屏幕的垂直距离clientX = 鼠标到浏览器内容区域的水平距离clientY = 鼠标到浏览器内容区域的垂直距离pageX = 鼠标相对浏览器内容区域的水平距离(包含滚动条未显示区域的宽度)pageY = 鼠标相对浏览器内容区域的垂直距离(包含滚动条未显示区域的长度)

注：个人在测试offsetTop（Left ）时，目标元素在没有已定位（position）的父元素下时，设置’html’标签的border:1px时，获取到的offsetTop包含了该border值，设置了‘body’标签的border值时offsetTop也包含了body的border值；在给目标元素套了一个设置了定位的父元素并给父元素时设置了border值的情况下，获取到的offsetTop并没有包含border，也就是此时以到border（上边框）底部的距离为参考。

offsetXxx:

在这里插入图片描述

clientXxx：

在这里插入图片描述

scrollXxx：

在这里插入图片描述

2. 测试示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}
/* 			html{border: 0px;} */#box{width: 90px;height: 80px;padding: 100px;margin: 70px;background-color: #5d5d5d;border: 50px solid black;text-align: center;overflow: scroll;}</style></head><body><div id="box">天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/></div>//用于显示相关数据<div id="innerHTML"></div></body><script type="text/javascript">//打印相关数据box=document.getElementById('box')data='offsetTop: '+box.offsetTop+'<br/>offsetLeft: '+box.offsetLeft+'<br/>offsetWidth: '+box.offsetWidth+'<br/>offsetHeight: '+box.offsetHeight+'<br/>'+'<br/>clinetTop: '+box.clientTop+'<br/>clientLeft: '+box.clientLeft+'<br/>clientWidth: '+box.clientWidth+'<br/>clientHeight: '+box.clientHeight+'<br/>'+'<br/>scrollTop: '+box.scrollTop+'<br/>scrollLeft: '+box.scrollLeft+'<br/>scrollWidth: '+box.scrollWidth		+'<br/>scrollHeight: '+box.scrollHeight +'&nbsp;&nbsp;----> 11行内容，每行21px，上下padding共200，合记431px'+'<br/><br/>右滚动条宽度: '+(box.offsetWidth-box.clientWidth-100)document.getElementById('innerHTML').innerHTML=data//双击触发鼠标事件打印鼠标相关位置信息box.ondblclick=function(e){console.log("\nbox.scrollTop: "+box.scrollTop+"\nbox.scrollLeft: "+box.scrollLeft+"\nclientX: "+e.clientX+"\nclientY: "+e.clientY+"\nscreenX: "+e.screenX+"\nscreenY: "+e.screenY)}</script>
</html>