浅谈JavaScript元素的尺寸和位置相关属性

最新推荐文章于 2020-03-05 18:55:07 发布

筱葭

最新推荐文章于 2020-03-05 18:55:07 发布

阅读量576

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript 元素尺寸位置

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/71745362

版权

JavaScript 专栏收录该内容

89 篇文章 2 订阅

订阅专栏

1、offsetWidth和offsetHeight

描述元素外尺寸，元素内容+内边距+边框，不包括外边距和滚动条。

2、clientWidth和clientHeight

描述元素内尺寸，元素内容+内边距，不包括边框（IE下实际包括）、外边距、滚动条。

3、scrollWidth和scrollHeight

元素内容+内边距+溢出尺寸，当内容没有溢出时，scrollWidth和scrollHeight一般分别与clientWidth和clientHeight相等，但实际上不同浏览器有不同处理，它们未必相等。

4、offsetLeft 和offsetTop

描述元素的左上角（边框的外边缘）与已定位的父容器（offsetParent对象——元素最近的定位为relative或absolute的祖先元素，若没有则返回null）左上角的距离。

5、clientLeft 和clientTop

描述内边距的外边缘和边框的外边缘之间的水平和垂直距离，也即左、上边框宽度。

6、scrollLeft和scrollTop

描述元素滚动条的位置，可写。

<!doctype html>  
<html>  
    <head>  
        <style type="text/css">  
			#out{
				width:200px;
				height:200px;
				background:red;
				position:absolute;
				left:200px;
				top:1000px;
				padding:5px;
				border:5px solid grey;
			}
			#in{
				width:50px;
				height:50px;
				position:absolute;
				left:50px;
				top:25px;
				background:blue;
				padding:5px;
				border:5px solid grey;
			}
        </style>  
    </head>  
    <body>   
		<div id="out">
			<div id="in"></div>
		</div>
		<script>
			var in_div = document.getElementById("in");
			console.log(in_div.offsetHeight); // 输出：70
			console.log(in_div.clientHeight); // 输出：60
			console.log(in_div.scrollHeight); // 输出：60
			console.log(in_div.offsetTop); // 输出：25
			console.log(in_div.clientTop); // 输出：5
			var out_div = document.getElementById("out");
			console.log(out_div.offsetHeight); // 输出：220
			console.log(out_div.clientHeight); // 输出：210
			console.log(out_div.scrollHeight); // 输出：210
			console.log(out_div.offsetTop); // 输出：1000
			console.log(out_div.clientTop); // 输出：5
			document.body.onscroll = function() { // 页面滚动时触发节流函数
				throttle(scroll, window);
			}
			function scroll() {
				console.log(document.body.scrollLeft);
				console.log(document.body.scrollTop);
			}
			function throttle(method, context) { // 函数节流
				clearTimeout(method.tId);
				method.tId = setTimeout(function() {
					method.call(context);
				}, 100);
			}
		</script>
    </body>  
</html>

筱葭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈JavaScript元素的尺寸和位置相关属性

1、offsetWidth和offsetHeight描述元素外尺寸，元素内容+内边距+边框，不包括外边距和滚动条。2、clientWidth和clientHeight描述元素内尺寸，元素内容+内边距，不包括边框（IE下实际包括）、外边距、滚动条。3、scrollWidth和scrollHeight元素内容+内边距+溢出尺寸，当内容没有溢出时，scrollWidth和scroll
复制链接

扫一扫