Question

嗨我想计算Div的位置。请原谅我，如果我无法正确解释，但我会尽力以最简单的方式解释一切。我正在创建侧面广告并放置我想要宽度位置的面板。当我在我的服务器上上传脚本时，我得到一个小脚本，我们放在发布者网站上，我们的脚本在iframe内运行。我想获得具有课程内容的div的位置＆＃39;。这是屏幕截图。

Screnshot 1

在上面的屏幕截图中，黄色突出显示的脚本正在计算div class =＆＃34; content＆＃34;的位置。这是红色框。我的代码工作正常，但在发布者网站上它没有正常工作，我只能得到两个ID，其ID类似于ebDiv .....（这些div高于黄色突出显示的js）。

然后我发现读取parentDiv以获取内容位置。

我写了这段代码。

 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。

Screetshot 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的定位

1 个答案: