clent、offset、scroll的区别

最新推荐文章于 2020-12-01 09:00:44 发布

ikun不解释

最新推荐文章于 2020-12-01 09:00:44 发布

阅读量697

点赞数

分类专栏： javascript 文章标签： client scroll offset

本文链接：https://blog.csdn.net/qq_42309685/article/details/97809950

版权

javascript 专栏收录该内容

134 篇文章 2 订阅

订阅专栏

代码如下

<style>
.box {
	margin: 100px;
	height: 100px;
	width: 100px;
	padding: 100px;
	border: 10px solid #eee;
}
</style>
</head>

<body>
<div class="box" id="box">
</div>
<script>
var box = document.getElementById("box");
console.log(box.clientWidth);
console.log(box.clientHeight);
console.log(box.offsetWidth);
console.log(box.offsetHeight);
console.log(box.scrollWidth);
console.log(box.scrollHeight);
</script>

在这里插入图片描述
可以看出不同的方法取得值不同
①client调用的方法和scroll相同，均包含内容的宽度（不包含margin和border）
②offset调用的方法包含内容、padding和border，但是也不包含margin