scroll、offset和client的区别

最新推荐文章于 2023-04-05 10:09:45 发布

liuliuliu_666

最新推荐文章于 2023-04-05 10:09:45 发布

阅读量451

点赞数

分类专栏：前端，js 文章标签： javascript offset client scroll

本文链接：https://blog.csdn.net/liuliuliu_666/article/details/71084275

版权

前端，js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body {
			
			height: 2000px;
			
			background-color: gray;
			margin: 100px;
			padding: 100px;
			border: 1px solid #89765f;
		}
		#div1 {
			margin: 100px 100px;
			border: 1px solid #f09838;
			padding: 20px;
			background-color: green;
			width: 300px;
			height: 300px;
			
		}
		#div2 {
			margin: 10px;
			padding: 20px;
			height: 100px;
			border: 1px solid #d09c45;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>
	
</body>
</html>

上面是测试代码

1.clientX与clientY

window.οnlοad=function(){
document.οnclick=function(ev){
var oEvent=ev||event;
alert(oEvent.clientX+","+oEvent.clientY);
}
}

oEvent.clientX是指鼠标到可视区左边框的距离。

oEvent.clientY是指鼠标到可视区上边框的距离。

2.offsetWidth、offsetHeight、offsetLeft和offsetTop

window.οnlοad=function(){
var oDiv=document.getElementById("div1");
alert(oDiv.offsetWidth); //342
alert(oDiv.offsetHeight); //342
alert(oDiv.offsetLeft); //401
alert(oDiv.offsetTop); //301

var oDiv1=document.getElementById("div2");
alert(oDiv1.offsetWidth); //280
alert(oDiv1.offsetHeight); //142
alert(oDiv1.offsetLeft); //30
alert(oDiv1.offsetTop); //30
}

offsetWidth是指div的宽度（包括div的边框）

offsetHeight是指div的高度（包括div的边框）

offsetLeft是指div到整个页面左边框的距离（不包括div的边框）

offsetTop是指div到整个页面上边框的距离（不包括div的边框）

(这里还有一个偏移参照——定位父级offsetParent，div1中的position是relative，所以参考我的另一篇博客)

3.scrollTop、scrollLeft、scrollWidth和scrollHeight

scrollTop是指可视区顶部边框与整个页面上部边框的看不到的区域。

scrollLeft是指可视区左边边框与整个页面左边边框的看不到的区域。

scrollWidth是指左边看不到的区域加可视区加右边看不到的区域即整个页面的宽度（包括边框）

scrollHeight是指上边看不到的区域加可视区加右边看不到的区域即整个页面的高度（包括边框）

window.οnlοad=function(){
var oDiv=document.getElementById("div1");
alert(oDiv.scrollWidth); //340
alert(oDiv.scrollHeight); //340
alert(oDiv.scrollLeft); //0
alert(oDiv.scrollTop); //0
var oDiv1=document.getElementById("div2");
alert(oDiv1.scrollWidth); //278
alert(oDiv1.scrollHeight); //140
alert(oDiv1.scrollLeft); //0
alert(oDiv1.scrollTop); //0
}

4.clientWidth、clientHeight、clientLeft和clientTop

clientWidth是指可视区的宽度。

clientHeight是指可视区的高度。

clientLeft获取左边框的宽度。

clientTop获取上边框的宽度。

window.οnlοad=function(){
var oDiv=document.getElementById("div1");
alert(oDiv.clientWidth); //340
alert(oDiv.clientHeight); //340
alert(oDiv.clientLeft); //1
alert(oDiv.clientTop); //1
var oDiv1=document.getElementById("div2");
alert(oDiv1.clientWidth); //278
alert(oDiv1.clientHeight); //140
alert(oDiv1.clientLeft); //1
alert(oDiv1.clientTop); //1
}