计算父级的定位 Div

Question

嗨，我想计算 Div 的位置。如果我无法正确解释，请原谅我，但我会尝试以最简单的方式解释所有内容。我正在创建侧面板广告并放置我想要宽度位置的面板。当我在我的服务器上上传脚本时，我会得到一个小脚本，我们将其放置在发布者网站上，我们的脚本在 iframe 中运行。我想获得 div 的位置，它有一个 class 'content'。这是屏幕截图。

在上面的屏幕截图中，黄色突出显示的脚本正在计算红色框中 div class="content" 的位置。我的代码运行良好，但在发布者网站上运行不正常，我只能得到两个 Divs，其 id 类似于 ebDiv.....（这些 divs 在黄色突出显示的 js 之上）。

然后我发现阅读父Div以获得内容位置。

我写了这段代码。

 var parentDoc = window;
        while (parentDoc !== parentDoc.parent) {
            parentDoc = parentDoc.parent;
        }
        parentDoc = parentDoc.document;
        var parentDiv = parentDoc.getElementsByTagName('div');
        var divs = [];
        for (var i = 0; i < parentDiv.length; i++) {
            if (parentDiv[i].className == "content") {
       alert(parentDiv[i].offsetWidth);
       alert(parentDiv[i].offsetLeft);
      }

宽度计算为 1010，这很好，但我只是缺少左定位，我正在使用 parentDiv[i].offsetLeft 是 2.

上面的屏幕截图宽度为 1010，这很好，但左侧定位不正确。

我有这个代码来计算宽度。

function ReadDivPos(selector) {
        var _divPos = "";

        $(selector).each(function() {
            var p = $(this).offset();
            var w = $(this).width();
            console.log("Top " + p.top) //top
            console.log("left " + p.left) //left
            console.log("right " + p.left + w) //right
            console.log("offsetWidth " + w); //width

            _divPos += "Left " + p.left + ",Width " + w + ",Avail Width " + window.screen.availWidth + ",Right " + (p.left + w) + "\n";
        });
        return _divPos;
    }
console.log(ReadDivPos(".content"));

当我使用相同的代码计算定位时，它不起作用。

                 var parentDoc = window;
                 while (parentDoc !== parentDoc.parent) {
                    parentDoc = parentDoc.parent;
                }
                parentDoc = parentDoc.document;
                var parentDiv = parentDoc.getElementsByTagName('div');
                var divs = [];
                for (var i = 0; i < parentDiv.length; i++) {
                    if (parentDiv[i].className == "content") {
                   $(parentDiv[i]).each(function() {
                    var p = $(this).offset();
                    var w = $(this).width();
                    console.log("Top " + p.top) //top
                    console.log("left " + p.left) //left
                    console.log("right " + p.left + w) //right
                    console.log("offsetWidth " + w); //width

                    _divPos += "Left " + p.left + ",Width " + w + ",Avail Width " +          window.screen.availWidth + ",Right " + (p.left + w) + "\n";

    }

  }

谁能告诉我如何解决这个问题。 Jquery/Javascript 什么都行。我不擅长前端的事情，所以如果我不能更好地解释它，我很抱歉。提前致谢

Answer 1

这是一个用于获取元素在页面上的位置的函数：

    function getPosition(element) {
        var xPosition = 0;
        var yPosition = 0;

        while (element) {
            xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
            yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
            element = element.offsetParent;
        }
        return { x: xPosition, y: yPosition };
    }

这样使用：

var pos = getPosition(element);
var x = pos["x"];
var y = pos["y"];

我不确定这是否正是您所需要的，但如果不是，您可以调整它以适应您的情况

计算父级的定位 Div

Calculating positioning of the parent Div

html

javascript

css

jquery