DOM三大家族（offset系列 & client系列 & scroll系列）以及其他常用坐标和尺寸属性总结

快来打我* 2023-07-15 09:27 61阅读 0赞

### offset系列 ###

*  el.offsetParent  
    表示元素中带有最近定位的祖先元素，祖先元素都没有定位则返回body
 *  el.offsetTop  
    表示元素距离其offsetParent上方的偏移
 *  el.offsetLeft  
    表示元素距离其offsetParen左边框的偏移
 *  el.offsetWidth  
    元素实际宽度 左右border+左右padding+width
 *  el.offsetHeight  
    元素实际高度 上下border+上下padding+height  
    以上属性返回值不带单位

##### offset VS style #####

<table> 
 <thead> 
  <tr> 
   <th>offset</th> 
   <th>style</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>获得的数据没有单位</td> 
   <td>带单位的字符串</td> 
  </tr> 
  <tr> 
   <td>得到任意样式表样式</td> 
   <td>只获取行内样式</td> 
  </tr> 
  <tr> 
   <td>offsetWidth包含三部分</td> 
   <td>style.width只包含width</td> 
  </tr> 
  <tr> 
   <td>offsetWidth只读属性</td> 
   <td>style.width可以读写</td> 
  </tr> 
 </tbody> 
</table>

### client系列 ###

可以动态获取元素边框大小、元素大小

*  el.clientTop
 *  el.clientLeft
 *  el.clientWidth
 *  el.clientHeight

var oDiv = document.querySelector('div');
    console.log(oDiv.clientTop); // 返回元素上边框宽度
    console.log(oDiv.clientLeft);// 返回元素左边框宽度
    console.log(oDiv.clientWidth);// 返回元素宽度 padding+内容宽
    console.log(oDiv.clientHeight);// 返回元素高度 padding+内容高 结果不带单位

### scroll系列 ###

*  el.scrollTop
    
    被卷去的上侧距离
 *  el.scrollLeft
 *  el.scrollWidth  
    自身实际宽度 不含边框
 *  el.scrollHeight  
    自身实际高度 不含边框，卷上去的总共高度

// 滚动条发生变化触发
    box.addEventListener('scroll',function() { 
         console.log(this.scrollTop); // 被卷去的上侧距离
    })

## 鼠标坐标值 ##

var oDiv = document.querySelector('div');
    oDiv.onclick = function(e) { 
        console.dir(e);
        // 返回鼠标相对于浏览器窗口可视区坐标
        console.log(e.clientX, e.clientY);
        // 返回鼠标相对于电脑屏幕坐标
        console.log(e.screenX, e.screenY);
        // ie9+ 相当于文档页面
        console.log(e.pageX, e.pageY);
    }

尺寸属性

Element.clientHeight   // 返回元素节点可见部分的高度
    Element.clientWidth   // 返回元素节点可见部分的宽度
    Element.clientLeft   // 返回元素节点左边框的宽度
    Element.clientTop   // 返回元素节点顶部边框的宽度
    Element.scrollHeight  // 返回元素节点的总高度
    Element.scrollWidth  // 返回元素节点的总宽度
    Element.scrollLeft   // 返回元素节点的水平滚动条向右滚动的像素数值,通过设置这个属性可以改变元素的滚动位置
    Element.scrollTop   // 返回元素节点的垂直滚动向下滚动的像素数值
    Element.offsetHeight   // 返回元素的垂直高度(包含border,padding)
    Element.offsetWidth    // 返回元素的水平宽度(包含border,padding)
    Element.offsetLeft    // 返回当前元素左上角相对于Element.offsetParent // 节点的垂直偏移
    Element.offsetTop   // 返回水平位移
    Element.style  // 返回元素节点的行内样式