Javascript获取页面元素位置

2016/02/02
也看看DOM和BOM位置的问题。

body和html

一般这两个节点是重合的，不设置margin和border属性，所以获取页面根节点，其一即可。

document.compatMode只有两个值：BackCompat（IE6怪异模式），CSS1Compat（一般浏览器的标准模式）

获取页面根节点：document.body（body节点，怪异模式），document.documentElement（html节点，标准模式）。而在Chrome下，标准模式也无法获取，所以通用：

var root_node = document.body || document.documentElement;

宽高

元素实际的宽、高，盒模型的content+padding:

var _width = root_node.clientWidth;
var _height = root_node.cilentHeight;

元素如果出现滚动条，包含滚动条的宽、高：

var _width = root_node.scrolltWidth;
var _height = root_node.scrollHeight;

所以不出现滚动条时，client === scroll，但是不同浏览器处理不同，所以取最大值：

var _width = Math.max(root_node.clientWidth,root_node.scrolltWidth;
var _height = Math.max(root_node.cilentHeight,root_node.scrollHeight);

绝对位置

元素的盒模型左上角距它第一个定位的父元素盒模型左上角的坐标，我们用offsetLeft和offsetTop表示。

所以要获取元素距浏览器或父容器元素（下文简称：父元素）左上角的绝对位置，就要找到元素的所有定位父元素，递归将offsetLeft和offsetTop累加：

// 获取元素距父元素的高度
function getElementAbsoluteOffsetTop(element){
  var absolute_offset_top = element.offsetTop;
  var parent_node = element.offsetParent;
  while(parent_node !== null){
    absolute_offset_top += parent_node.offsetTop; // 注意累加，这次加的是第一个定位父元素距第二个定位父元素的offsetTop
    parent_node = parent_node.offsetParent; // 获取定位父元素的定位父元素
  }
  return absolute_offset_top;
}

相对位置

父元素出现滚动条时，使用父元素的scrollLeft和scrollTop来进行计算得到元素的相对位置，将元素距父元素的绝对位置减去父元素已经横（竖）向滚动的距离即可：

element_absolute_offset_top - parent_scroll_top

其他

getBoundingClientRect方法的left和top属性，可快速获取元素至浏览器左上角的位置，不过兼容性不好。