JavaScript中offset screen client的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="p1"></div>
		<script>
			p1 = document.querySelector('.p1')
			p1.style.backgroundColor = 'red'
			p1.style.width = '200px'
			p1.style.height = '200px' 
			p1.onmousemove=function(e){
				
				p1.innerHTML = e.offsetX+','+e.offsetY
				p1.innerHTML = e.screenX+','+e.screenY
				p1.innerHTML = e.clientX+','+e.clientY
			
			}
			</script>
					
		
	</body>
</html>

offset是相对于父标签的距离
screen(屏幕) 是相对于屏幕的距离
client(客户端) 是相对于窗口的距离

你可能感兴趣的:(html,html,javascript)