DOM —【client、offset、scroll三大系列】

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值