client：

var box=document.querySelector('.box');
console.log(box.clientWidth);  
//獲取元素的可見寬度(width+padding，不包括margin和border)只有數值，沒有單位
console.log(box.clientHeight); 
//獲取元素的可見高度(width+padding，不包括margin和border)只有數值，沒有單位
console.log(window.getComputedStyle(box).width);
// 而getcomputerStyle獲取的是帶有單位的單純的width值
 

offset：

var box=document.querySelector('.box');
console.log(box.offsetWidth);
//獲取元素的可見寬度(width+padding+border，不包括margin)只有數值，沒有單位
console.log(box.offsetHeight);
//獲取元素的可見高度(width+padding+border，不包括margin)只有數值，沒有單位
console.log(box.offsetLeft);
console.log(box.offsetTop);
//返回距離上級盒子（帶有定位）左邊的位置
//如果父級都沒有定位則以body 為準
//從父親的padding 開始算,父親的border 不算
//獲取元素距離父元素的偏移量，如果在最外層，則以視窗為標準
console.log(window.getComputedStyle(box).width);
// 而getcomputerStyle獲取的是帶有單位的單純的width值
 

scroll：

var box=document.querySelector('.box');
console.log(box.scrollWidth);
//獲取元素的可見寬度(width+padding，不包括margin和border,如果內容超出的話算其超出內容寬度)只有數值，沒有單位
console.log(box.scrollHeight);
//獲取元素的可見高度(width+padding，不包括margin和border,如果內容超出的話算其超出內容高度)只有數值，沒有單位
console.log(window.getComputedStyle(box).width);
// 而getcomputerStyle獲取的是帶有單位的單純的width值