clent、offset、scroll的区别

编程小6 (14) 2024-03-18 16:12

Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说clent、offset、scroll的区别,希望能够帮助你!!!。

代码如下

<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