元素页面的位置

最新推荐文章于 2021-01-31 13:37:59 发布

lowin

最新推荐文章于 2021-01-31 13:37:59 发布

阅读量544

点赞数

文章标签： iframe table 浏览器 opera chrome null

本文链接：https://blog.csdn.net/cs_wuxiang/article/details/7746683

版权

1、原生的判断方式navigator.userAgent.toLowerCase().indexOf()//chrome,firefox.msie,opera

2、getBoundingClientRect()最先是IE的私有属性，现在已经是一个W3C标准【ie,ff,chrome】。所以你不用当心浏览器兼容问题，不过还是有区别的。
IE只返回top,lef,right,bottom四个值，不够可以通过以下方法来获取width,height的值

var ro = object.getBoundingClientRect();
var Width = ro.right - ro.left;
var Height = ro.bottom - ro.top;

有了这个方法，获取页面元素的位置就简单多了:

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

3、最根本的方式方法：

采用元素的el.offsetTop与offsetParent;

getTop:function(el){

var pos = [el.offsetTop,el.offsetLeft];

var parent = el.offsetParent;

while(parent){

pos[0]+=parent.offsetTop;

pos[1]+=parent.offsetLeft;

parent = parent .offsetParent;

}

return pos;

}

上面代码只适用于不含iframe与table中元素,嵌套iframe中offsetParent就是null获取的数据对于table中的td元素，offsetParent为table

获取浏览器滚动条位置，

if (document.compatMode == "BackCompat"){//IE当没有指定doctype时,采用这种模式
　　　　　　var elementScrollLeft=document.body.scrollLeft;
　　　　} else {
　　　　　　var elementScrollLeft=document.documentElement.scrollLeft;
　　　　}

还必须减去横向与纵向滚动条的位置同时还要减去父元素parentNode的横向与纵向滚动条，

其它可以参考：http://www.itnxp.com/tech/57

第二篇文章最后比较清楚的说明了，当我们的元素所处的viewport不是<body>的时候，其定位是从自己的viewport的(0,0)开始计算的。这个时候我们如果用获取...(1)中的办法去取绝对位置，将产生错误的定位效果@_@。所以为了避免出错我们需要找到被计算绝对位置的元素的viewport，然后把它的offsetTop和offsetLeft累计到其viewport的(0,0)处为止。

当我们需要计算的元素的offsetPerent满足这个条件：elmt.style.position == 'absolute' || elmt.style.position == 'relative' || ( elmt.style.overflow != 'visible' && elmt.style.overflow != '' )，它将是一个viewport，也就是说会影响绝对定位的计算，我们应该在此停止offset的累加。

更新过的方法叫GetAbsoluteLocationEx，代码附后：

function GetAbsoluteLocationEx(element)
{
    if ( arguments.length != 1 || element == null )
    {
        return null;
    }
    var elmt = element;
    var offsetTop = elmt.offsetTop;
    var offsetLeft = elmt.offsetLeft;
    var offsetWidth = elmt.offsetWidth;
    var offsetHeight = elmt.offsetHeight;
    while( elmt = elmt.offsetParent )
    {

          // add this judge
        if ( elmt.style.position == 'absolute' || elmt.style.position == 'relative'
            || ( elmt.style.overflow != 'visible' && elmt.style.overflow != '' ) )
        {
            break;
        }
        offsetTop += elmt.offsetTop;
        offsetLeft += elmt.offsetLeft;
    }
    return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
        offsetWidth: offsetWidth, offsetHeight: offsetHeight };
}

如果offsetParent没有设置position和overflow属性，GetAbsoluteLocation和 GetAbsoluteLocationEx的计算结果完全相同的，也就是说GetAbsoluteLocationEx向下兼容 GetAbsoluteLocation。

当页面中含有iframe时采用：

/**
* @param e 页面元素
* @param arrParentid 页面元素e所在的iframe的数组
* @param isID 参数arrParentid中是iframe的id还是object
*/
function getElementAbsPos(e,arrParentid,isID)
{
var t = e.offsetTop;
var l = e.offsetLeft;
while(e = e.offsetParent)
{
t += e.offsetTop;
l += e.offsetLeft;
}
if(arguments.length >= 2)
{
for(var i=0; i<arrParentid.length; i++)
{
e = (isID==true) ? top.document.getElementById(arrParentid[i]) : arrParentid[i];
t += e.offsetTop;
l += e.offsetLeft;
while(e = e.offsetParent)
{
t += e.offsetTop;
l += e.offsetLeft;
}
}
}
return {left:l,top:t};
}

lowin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素页面的位置

1、原生的判断方式navigator.userAgent.toLowerCase().indexOf()//chrome,firefox.msie,opera2、getBoundingClientRect()最先是IE的私有属性，现在已经是一个W3C标准【ie,ff,chrome】。所以你不用当心浏览器兼容问题，不过还是有区别的。IE只返回top,lef,right,bottom四个值，不
复制链接

扫一扫