全面回忆

张棣

各种DOM宽高和鼠标的位置的计算

• 分类: CSS

工作中有实现拖拽的需求，会涉及到DOM的宽高计算和鼠标的位置的确定，记录一下他们的不同，别给忘了。

宽高计算

以dom的宽度为例，高度与其一致。

  1. offsetWidth 包括DOM盒模型的内容宽度 + 内边距 + 边框。
  2. clientWidth 包括DOM盒模型的可视区域的宽度 + 内边距，但不包括边框和滚动条的宽度。
  3. scrollWidth DOM内容包括滚动部分的宽度。

下图是在网上的一张图片，出处忘了是哪的了，可以很清楚看到他们的不同。

box

鼠标位置计算

  1. pageX/Y 相对于整个页面的位置，同一位置的鼠标位置不受scroll的影响。
  2. clientX/Y 相对于浏览器窗口的位置，同一位置的鼠标位置受scroll的影响。
  3. screenX/Y 相对于整个屏幕的位置。
  4. offsetX/Y 相对于当前元素内边界的位置。
  5. layerX/Y 相对于当前元素外边界的位置，包括border。
  6. x/y 和clientX/Y等价。

获取DOM的位置信息

DOM元素有两个属性，offsetLeft和offsetTop，这两个属性指的都是其相对于父元素的位置，如要获得绝对位置，需要迭代进行计算

1
2
3
4
5
6
7
function getTop(e){
   var offset=e.offsetTop;
   if(e.offsetParent !== null){
     offset+=getTop(e.offsetParent);
   }         
   return offset;
}

另外也可以通过getBoundingClientRect()方法获取dom的位置信息。兼容性如下：

chrome firefox ie opera safari
1.0 3.0 4.0 YES 4.0