Javascript 获取指定页面元素的位置

 代码如下 复制代码
<script language="JavaScript" type="text/javascript">
<!--
 
// 说明:用 Javascript 获取指定页面元素的位置
// 整理:http://www.111cn.net
 代码如下 复制代码
// 来源: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>
时间: 2024-08-02 07:30:38

Javascript 获取指定页面元素的位置的相关文章

JavaScript获取指定元素位置的方法

 本文实例讲述了JavaScript获取指定元素位置的方法.分享给大家供大家参考.具体如下: 代码如下: function showpane() { var self = document.getElementById("eID"); var left = self.getBoundingClientRect().left + document.documentElement.scrollLeft; var top = self.getBoundingClientRect().top

JavaScript获取指定元素位置的方法_javascript技巧

本文实例讲述了JavaScript获取指定元素位置的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: function showpane() {   var self = document.getElementById("eID");   var left = self.getBoundingClientRect().left + document.documentElement.scrollLeft;   var top = self.getBoundingClientR

js getBoundingClientRect() 来获取页面元素的位置_javascript技巧

document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect() Return Value Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordina

iframe子页面获取父页面元素的方法_jquery

在iframe子页面获取父页面元素 代码如下: 复制代码 代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: 复制代码 代码如下: $("#objid", document.iframes('iframe').document) 或 复制代码 代码如下: $(document.getElementById('iframeId').contentWindow.document.body).html() $(docum

如何用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页面积,又叫做viewport(视口). 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的.如果不能全部显示,

用Javascript 获取页面元素的位置的代码_javascript技巧

下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的绝对大小和相对大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的绝对大小.通常情况下,网页的绝对大小由内容和CSS样式表决定. 网页的相对大小则是指在浏览器窗口中看到的那部分网页,也就是浏览器窗口的大小,又叫做viewport(视口). 下图中央的方框就代表浏览器窗口,每次只能显示一部分网页. (图一 网页的绝对大小和相对大小) 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页面积,又叫做viewport(视口). 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的.如果不能全部显示,

Javascript设置获取iframe页面元素与页面重载方法

1,实现javascript重载iframe页面,兼容各浏览器的方法  代码如下 复制代码 document.getElementById(FrameID).contentWindow.location.reload(true); 2,其次是获取iframe内的元素并应用  代码如下 复制代码 iframe.contentWindow.document.getElementById(id).style.display="block"; 3,iframe页面调用父级页面中的函数 pare

js 获取页面元素的位置的例子

John Resig给出的方案就是用clientTop,clientLeft作减值.以下函数就是从JQuery中抠出来,就后就用它获取页面元素的坐标,比offset大法安全多了. var getCoords = function(el){   var box = el.getBoundingClientRect(),   doc = el.ownerDocument,   body = doc.body,   html = doc.documentElement,   clientTop = h