<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
#oneDiv{
width: 200px;
height: 100px;
background-color: lightskyblue;
border-top: 10px solid red;
border-left: 20px solid blue;
border-right: 30px solid #22d016;
border-bottom: 40px solid #D0169CFF;
padding: 10px 20px 30px 40px;
margin: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div id="oneDiv">这是一个DIV</div>
<script>
var one = document.querySelector("#oneDiv");
console.log("client系列-------------------");
console.log("one.clientWidth:内边距的宽+内容区的宽----"+one.clientWidth);
console.log("one.clientHeight:内边距的高+内容区的高----"+one.clientHeight);
console.log("Offset系列-------------------");
console.log("one.offsetWidth:内边距的宽+内容区的宽+边框的宽----"+one.offsetWidth);
console.log("one.offsetHeight:内边距的高+内容区的高+边框的高----"+one.offsetHeight);
console.log("one.offsetTop:元素自身的偏移,以带有定位的父亲为准,如果父亲没有定位,那么将以body为准----"+one.offsetTop);
console.log("one.offsetLeft:元素自身的偏移,以带有定位的父亲为准,如果父亲没有定位,那么将以body为准----"+one.offsetLeft);
</script>
</body>
</html>
- 分析 Client系列(注意:只读)
- 作用
- clientWidth 内容+padding的宽
- clientHeight 内容+padding的高
- 图解
- 输出结果
- client系列-------------------
- one.clientWidth:内边距的宽+内容区的宽----260
- one.clientHeight:内边距的高+内容区的高----140
- 分析 offset系列(注意:只读)
- 作用:
- offsetWidth 内容+padding+border的宽
- offsetHeight 内容+padding+border的高
- offsetLeft 左边的偏移量(绝对值)
- offsetTop 上边的偏移量(绝对值)
- 结果:
- Offset系列-------------------
- one.offsetWidth:内边距的宽+内容区的宽+边框的宽----310
- one.offsetHeight:内边距的高+内容区的高+边框的高----190
- one.offsetTop:----10
- one.offsetLeft:----40
