取元素在浏览器窗口中的绝对坐标(定位时以常用)

来源:赵克立博客分类: HTML5 标签：js特效发布时间:2014-05-03 14:05:00最后更新:2016-07-14 20:03:45浏览:3956

本文为博主原创文章，转载请声明原文链接...谢谢。o_0。

原文链接:

http://www.zhaokeli.com /article/1706.html

更新时间：

2016-07-14 20:03:45

温馨提示：

学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

/**
 * 取元素在浏览器中的绝对定位
 * @param  {[type]} elements [description]
 * @return {[type]}          [description]
 */
function getRect(elements) {
	var rect = elements.getBoundingClientRect();
	w = rect.width || rect.right - rect.left;
	h = rect.height || rect.bottom - rect.top;
	ww = document.documentElement.clientWidth; //浏览器可见宽
	hh = document.documentElement.clientHeight; //浏览器可见高
	return { // 兼容ie多出的两个px
		top: Math.floor(rect.top), // 元素顶边到浏览器底边距离
		bottom: Math.floor(hh - rect.bottom), // 元素底边到浏览器底边距离
		left: Math.floor(rect.left), // 元素左边到浏览器底边距离
		right: Math.floor(ww - rect.right) // 元素底右到浏览器底边距离
	};
};
var box = document.getElementById('footer');
var obj = getRect(box);
var str = 'top:' + obj.top + ' right:' + obj.right + ' bottom:' + obj.bottom + ' left:' + obj.right;
console.log(str);