getBoundingClientRect() 替代答案

【问题标题】：getBoundingClientRect() alternativegetBoundingClientRect() 替代
【发布时间】：2017-08-02 14:14:03
【问题描述】：

我正在使用 document.body.getBoundingClientRect().right 来查找顶部导航中的所有元素都看不见，以便隐藏它们并将它们放在“更多”下拉菜单下。但该功能似乎在 safari 中不起作用。该功能是否有任何替代方法，或者有什么方法可以在 safari 中修复它？

var windowRightOffset = document.body.getBoundingClientRect().right,
        elementHiddenFlag = false;

    $(".headerNav").find("li").each(function() {
        if ($(this).className !== 'more') {
            var elemRightOffset = $(this).find("a")[0].getBoundingClientRect().right;
            if (elemRightOffset > windowRightOffset) {
                $(this).hide();
                elementHiddenFlag = true;
                $(".more .moreNavItems-content").append($(this).html());
            }
        }
    });

【问题讨论】：

它在 Safari 中运行良好。问题出在别的东西上。

标签： jquery getboundingclientrect

【解决方案1】：

由于您使用的是 jQuery，您可以查看 jQuery 中的 position 和 offset 函数。

要用jQuery替换你的代码，你会这样做：

var aTag = $(this).find("a")[0];
var left = aTag.offset().left;
var width = aTag.find("a")[0].width();

var aTagRightOffset = width + left;

【讨论】：

【解决方案2】：

好吧，我们走吧:-)

function getBounding(name,index){
    this.ele = document.querySelectorAll(name)[index];
    this.y= this.ele.offsetTop;
    this.x= this.ele.offsetLeft;
    this.coordinates();
  }

  getBounding.prototype.coordinates = function(){
    if( this.ele.localName != "body"){
      this.ele = this.ele.offsetParent;
      this.y += this.ele.offsetTop;
      this.x += this.ele.offsetLeft;
      this.coordinates();
    } else {
      return({x:this.x,y:this.y});
    }
  }

new getBounding(".-img",0)

【讨论】：