JS中event事件offset、page、client、screen的区别

最新推荐文章于 2023-07-13 18:30:00 发布

风再起0822

最新推荐文章于 2023-07-13 18:30:00 发布

阅读量293

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_43682622/article/details/106471611

版权

这篇文章详细介绍了JavaScript中与事件坐标相关的属性，如offsetLeft/Top（元素相对父元素的偏移）、offsetHeight/Width（元素实际尺寸）、以及鼠标事件中的offsetX/Y（相对于事件源的位置）。通过示例代码展示了这些属性在页面上的应用，帮助读者理解它们的区别。

摘要由CSDN通过智能技术生成

JS中event事件offset、page、client、screen的区别

offsetLeft:获取自己左外边框与父级元素的左内边框的距离
offsetTop:获取自己上外边框与父级元素的上内边框的距离

offsetHeight:获取元素本身的高
offsetWidth:获取元素本身的宽
获取的是元素的实际宽高 = width + border + padding
图片来源网络

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.offset1{
				width: 100px;
				height: 100px;
				margin: 50px 50px;
				background-color: red;
			}
			.offset2{
				width: 100px;
				height: 100px;
				margin: 50px 150px;
				background-color: blue;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				
				document.onmousemove = function(ev){
					var e = ev ||window.event;
					document.title = e.offsetX+","+e.offsetY;
					//document.title = e.clientX+","+e.clientY;
					//document.title = e.screenX+","+e.screenY;
					//document.title = e.pageX+","+e.pageY;
				}
			}
			
		</script>
	</head>
	<body>
		<div class="offset1">
		</div>
		<div class="offset2">
		</div>
	</body>
</html>