JS之clientWidth、offsetWidth等屬性介紹

1、clientXXX 屬性

代碼演示

// css 部分
<style>
  .test{
     width:100px;
     height:100px;
     border:1px solid red;
     padding:20px;
}
    </style>
// body 和 js 部分
<div class="test">
        hello
</div>
<script>
   var div = document.getElementsByTagName('div')[0];
   console.log(div.clientWidth);
   console.log(div.clientHeight)
   console.log(div.clientTop)
   console.log(div.clientLeft)
　　// 注意不含有如下兩個屬性
   // console.log(div.clientRight)
   // console.log(div.clientBottom)
</script>

控制檯打印輸出（結果）

根據答應結果和div盒子模型比較可得：

　　clientWidth = padding值*2（左右padding值） + width 值；

　　clientHeight = padding值*2（上下padding值） + height 值；

　　clientTop = border值（上邊框值）

　　clientLeft = border值（左邊框值）

2、offsetXXX 屬性

js代碼

<script>
    var div = document.getElementsByTagName('div')[0];
    console.log(div.offsetWidth);
    console.log(div.offsetHeight)
    console.log(div.offsetTop)
    console.log(div.offsetLeft)
　　//注意： 如下兩個屬性不存在
    console.log(div.offsetRight)
    console.log(div.offsetBottom)
</script>

打印結果分析

div盒子模型

body 盒子模型

 由以上兩個模型分析得出

 　　offsetWidth = 左右padding值+width值+左右border值

　　 offsetHeight = 上下padding值+height值+上下border值

　　 offsetTop 表示該元素的邊框上邊緣與它最近父元素的上邊框內邊緣的距離，若是沒有父元素則把body當作它的父元素，由此知（默認狀況下body有個margin值8px）

　　 offsetTop = 8

　　 offsetLeft = 8