<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* { margin: 0; padding: 0;border:none; }
body{ height:100%}
#box{ width: 100px; height: 100px; border: 30px solid red;
padding: 20px; position: relative;}
#box1{ height: 100px;width: 100px;
background: blue;position: absolute;left: 10px;top:10px;
padding: 10px;border:1px solid black; }
</style>
</head>
<body>
<div id="box">
<div id="box1">
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
</div>
</div>
<script>
window.onload = function () {
console.log('-------------------------------');
console.log(box.clientHeight);//140
console.log(box.clientWidth);//140
console.log(box.clientLeft);//30
console.log(box.clientTop);//30
console.log('-------------------------------');
console.log(box1.clientHeight);//120
console.log(box1.clientWidth);//120
console.log(box1.clientLeft);//1
console.log(box1.clientTop);//1
}
</script>
</body>
</html>
clientHeight、clientwidth、clienttop、clientleft
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
