Question

是否有一种简单的方法可以从其直接父级计算offsetLeft，但不包括父级的填充和边框宽度？

执行此操作时，返回的值包括父级的左边框和填充宽度。

child.offsetLeft - parent.offsetLeft

jsFiddle

我知道我可以简单地减去父级的左边框+填充宽度，但这意味着我必须使用getComputedStyle来检索这些值，去掉'px'并转换为int，然后最后减去..是不是有更好的东西？

Answer 1

看看我的评论。我写了每个元素的offsetLeft属性不包括offsetParent的边界，我写了两个例外，这里每个元素的offsetParent都是document.body。所以计算结果

child.offsetLeft - parent.offsetLeft - parent.clientLeft -
    parseInt(getComputedStyle(parent).paddingLeft)

因为两个offsetLeft属性的差异包括父边框。

Answer 2

我从1999年开始使用Javascript，所以我有自己的库，比如Jquery或其他东西所以忘了Application语句它只是所有方法和属性的容器，我复制你需要的东西你可以改变它，四函数ELEMENT_pageX ELEMENT_pageY ELEMENT_distanceX ELEMENT_distanceY

ELEMENT_distanceX为您提供整个页面上两个不同元素之间的x差异。从B的outersideLeft到A的outersideLeft测量

var Application=new Object ();

//-------- Browser   Detection                                                                                
if (typeof ScriptEngine!="undefined" && ScriptEngine()=="JScript") 
     Application.BrowserType=0;                                     //--- IExplorer         = 0
else if (navigator.userAgent.indexOf('Chrome') == -1)               
     Application.BrowserType=1;                                     //--- Mozilla Firefox   = 1

 else Application.BrowserType=2;                                     //--- Google Chrome     = 2


/*  Calculates the pageX value of the element - exception: do not use with document.body or document.documentElement
    if one of the ancestors has overflow:scroll the position property of the ancestor has to be relative or absolute to give the correct value
pageX should be 0 when handing over, or it can be used as value transition */
Application.ELEMENT_pageX=function (element,pageX)
    {
    var parent=element.offsetParent;
    if (parent!=document.body)
        {
        pageX+=element.offsetLeft; 
        if (parent.scrollLeft) pageX-=parent.scrollLeft;
        if (parent.tagName!="TABLE")                //--- TABLE BUG
            pageX+=parent.clientLeft;
        pageX=this.ELEMENT_pageX(parent,pageX)
        }
    else    //--- parent==document.body
        {
        pageX+=element.offsetLeft;
        if (this.BrowserType==1) pageX+=element.clientLeft; //--  ------------------------ CROSS BROWSER COMPATIBILITY Mozilla
        }
    return pageX;
    }

/*  Calculates the pageY value of the element -  - exception: do not use with document.body or document.documentElement
if one of the ancestors has overflow:scroll the position property of the ancestor  has to be relative or absolute to give the correct value
pageY should be 0 when handing over, or it can be used as value transition */
Application.ELEMENT_pageY=function (element,pageY)
    {
    var parent=element.offsetParent;
    if (parent!=document.body)
        {
        pageY+=element.offsetTop;
        if (parent.scrollTop) pageY-=parent.scrollTop;
        if (parent.tagName!="TABLE")                //--- TABLE BUG
            pageY+=parent.clientTop;
        pageY=this.ELEMENT_pageY(parent,pageY)
        }
    else
        {
        pageY+=element.offsetTop;
        if (this.BrowserType==1) pageY+=element.clientTop; //-------------------------- CROSS BROWSER COMPATIBILITY Mozilla
        }
    return pageY;
    }

//-------- returns the difference in X (B-A) - do not use with element A or B is document.body or document.documentElement
Application.ELEMENT_distanceX=function (elementA, elementB)
    {
    return this.ELEMENT_pageX (elementB,0)- this.ELEMENT_pageX (elementA,0);
    }

 //-------- returns the difference in Y (B-A) do not use with element A or B is document.body or document.documentElement
Application.ELEMENT_distanceY=function (elementA, elementB)
    {
    return this.ELEMENT_pageY (elementB,0)- this.ELEMENT_pageY (elementA,0);
    }

如何从父级计算OffsetLeft，不包括父级的左边填充和＆amp;边界

2 个答案: