信鸽网

js获取元素相对窗口位置的实现代码

  作者：bea

JS获取元素的offsetTop,offsetLeft等属性 obj.clientWidth //获取元素的宽度 obj.clientHeight //元素的高度 obj.offsetLeft //元素相对于父元素的left obj.offsetTop //元素相对于父元素的top obj.offsetWidth //元素的宽度 obj.offsetHeight //元素的高度 区别： clientWidth = width + padding clientHeight =

JS获取元素的offsetTop,offsetLeft等属性


obj.clientWidth //获取元素的宽度


obj.clientHeight //元素的高度
obj.offsetLeft //元素相对于父元素的left
obj.offsetTop //元素相对于父元素的top
obj.offsetWidth //元素的宽度
obj.offsetHeight //元素的高度


区别：


clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = width + padding + border
offset比client多了border的宽度




//获取元素的纵坐标（相对于窗口）

function getTop(e){

  var offset=e.offsetTop;

  if(e.offsetParent!=null) offset+=getTop(e.offsetParent);

  return offset;

}

//获取元素的横坐标（相对于窗口）

function getLeft(e){

  var offset=e.offsetLeft;

  if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);

  return offset;

}


之前也写过一篇JS关于获取元素位置的文章：JS获取元素的offsetTop,offsetLeft等属性，我们可以通过offsetTop和offsetLeft属性获取元素相对窗口的位置，但offsetTop和offsetLeft属性都是相对于父元素定位的，而通常需要获取位置的元素都不是在最外层，所以遍历上级元素的offset相关属性少不了。那效率就成问题了。




//获取元素的纵坐标（相对于窗口）

function getTop(e){

var offset=e.offsetTop;

if(e.offsetParent!=null) offset+=getTop(e.offsetParent);

return offset;

}

//获取元素的横坐标（相对于窗口）

function getLeft(e){

var offset=e.offsetLeft;

if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);

return offset;

}


好在浏览器给我提供了相应的接口getBoundingClientRect，这个方法最早出现在IE浏览器中，后来的浏览器也跟着支持了这个方法，而且还更加完善，IE中只能获取到元素的left,top,bottom,right的属性，而后面的现代浏览器还能获取到元素的width和




















Chrome Firefox (Gecko) Internet Explorer Opera Safari
1.0 3.0 (1.9) 4.0 (Yes) 4.0


这里要注意的是，bottom是元素底部相对于窗口顶部的距离，而不是像css里面position的bottom相对于窗口底部，同理，rihgt属性是元素最右边相对于窗口左边的距离。




var box = document.getElementById("box");

var pos = box.getBoundingClientRect();

box.innerHTML = "top:"+pos.top +

  "left:"+pos.left +

  "bottom:"+pos.bottom +

  "right:"+pos.right +

  "width:"+pos.width +

  "height:"+pos.height


原创文章，转载请注明： 转载自前端开发




有用  |  无用

猜你喜欢

您可能感兴趣的文章: