随笔 - 326, 文章 - 0, 评论 - 0, 阅读 - 16万

<!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