用 Javascript 獲取指定頁面元素的位置是一個非常常見的需求,本文介紹的方法能夠準確返回一個元素相對于整個文檔左上角的坐標,即元素的 top 、left 的位置,而且能夠兼容瀏覽器,相信對新手非常有用。
第二種方法:
function WebForm_GetElementPosition(element) {
var result = new Object();
result.x = 0;
result.y = 0;
result.width = 0;
result.height = 0;
if (element.offsetParent) {
result.x = element.offsetLeft;
result.y = element.offsetTop;
var parent = element.offsetParent;
while (parent) {
result.x += parent.offsetLeft;
result.y += parent.offsetTop;
var parentTagName = parent.tagName.toLowerCase();
if (parentTagName != "table" &&
parentTagName != "body" &&
parentTagName != "html" &&
parentTagName != "div" &&
parent.clientTop &&
parent.clientLeft) {
result.x += parent.clientLeft;
result.y += parent.clientTop;
}
parent = parent.offsetParent;
}
}
else if (element.left && element.top) {
result.x = element.left;
result.y = element.top;
}
else {
if (element.x) {
result.x = element.x;
}
if (element.y) {
result.y = element.y;
}
}
if (element.offsetWidth && element.offsetHeight) {
result.width = element.offsetWidth;
result.height = element.offsetHeight;
}
else if (element.style && element.style.pixelWidth && element.style.pixelHeight) {
result.width = element.style.pixelWidth;
result.height = element.style.pixelHeight;
}
return result;
}
- <script language="javascript" type="text/javascript">
- <!--
- // 說明:用 Javascript 獲取指定頁面元素的位置
- // 整理:http://www.codebit.cn
- // 來源:YUI DOM
- function getElementPos(elementId) {
- var ua = navigator.userAgent.toLowerCase();
- var isOpera = (ua.indexOf('opera') != -1);
- var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
- var el = document.getElementById(elementId);
- if(el.parentNode === null || el.style.display == 'none'){ return false; }
- var parent = null;
- var pos = []; //不定長數組?
- var box;
- if(el.getBoundingClientRect){ //IE
- box = el.getBoundingClientRect();
- var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
- var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
- return {x:box.left + scrollLeft, y:box.top + scrollTop};
- }else if(document.getBoxObjectFor){ // gecko
- box = document.getBoxObjectFor(el);
- var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
- var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
- pos = [box.x - borderLeft, box.y - borderTop];
- }else{ // safari & opera
- pos = [el.offsetLeft, el.offsetTop];
- parent = el.offsetParent;
- if (parent != el) {
- while (parent) {
- pos[0] += parent.offsetLeft;
- pos[1] += parent.offsetTop;
- parent = parent.offsetParent;
- }
- }
- if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )){
- pos[0] -= document.body.offsetLeft;
- pos[1] -= document.body.offsetTop;
- }
- }
- if (el.parentNode) {
- parent = el.parentNode;
- } else {
- parent = null;
- }
- while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors
- pos[0] -= parent.scrollLeft;
- pos[1] -= parent.scrollTop;
- if (parent.parentNode) {
- parent = parent.parentNode;
- } else {
- parent = null;
- }
- }
- return {x:pos[0], y:pos[1]};
- } //-->
- </script>
第二種方法:
function WebForm_GetElementPosition(element) {
var result = new Object();
result.x = 0;
result.y = 0;
result.width = 0;
result.height = 0;
if (element.offsetParent) {
result.x = element.offsetLeft;
result.y = element.offsetTop;
var parent = element.offsetParent;
while (parent) {
result.x += parent.offsetLeft;
result.y += parent.offsetTop;
var parentTagName = parent.tagName.toLowerCase();
if (parentTagName != "table" &&
parentTagName != "body" &&
parentTagName != "html" &&
parentTagName != "div" &&
parent.clientTop &&
parent.clientLeft) {
result.x += parent.clientLeft;
result.y += parent.clientTop;
}
parent = parent.offsetParent;
}
}
else if (element.left && element.top) {
result.x = element.left;
result.y = element.top;
}
else {
if (element.x) {
result.x = element.x;
}
if (element.y) {
result.y = element.y;
}
}
if (element.offsetWidth && element.offsetHeight) {
result.width = element.offsetWidth;
result.height = element.offsetHeight;
}
else if (element.style && element.style.pixelWidth && element.style.pixelHeight) {
result.width = element.style.pixelWidth;
result.height = element.style.pixelHeight;
}
return result;
}