Question

我想获得任何页面内容的left位置（因此在大多数页面上都有一个脚本）。

我现在所做的是$('div').eq(0).offset().left，因此这会得到第一个div的left位置。

现在的问题是许多网站（包括SO）都有一个顶级导航栏100% width，或者其他绝对定位的元素（当放在DOM中时首先放置）将返回left:0px，即使内容集中。

如何在任何网页中获得实际内容的left位置？

我考虑过的可能解决方案：

只需跳过不相对定位的div。
也许通过margin-left: auto
有些网站会向其内容提供ID content（包括SO）
通常内容div是身体的直接子（事实上它实际上是在包裹内）

LE

内容div可能是页面中最高的（最大height）div。
即使标题宽度为100％，大多数情况下其内部的第一个元素与内容具有相同的left位置

请注意，我们只能在实际拥有内容div的页面上讨论此位置（不是100％全宽，没有响应等等）

PS：它不一定适用于所有情况，但适用于大多数网站的东西应该没问题。此外，内容div通常具有的任何其他规则都是一个很好的开始。

Answer 1

var div = $('#divId');
var offset = div.offset();
var left = offset.left;
var top = offset.top;

Answer 2

也许你可以在身体上搜寻边缘设置为自动左边的孩子并使用它？

jQuery不会返回自动，但您可以通过获取子项的margin-left来查找，快速调整body的大小，比较margin-left，如果有任何不同然后是margin left: auto的值。然后只需获得该元素的左侧偏移量。

它显然不是防弹 - 因为它假设margin: auto仅用于集中容器。但是，通过一些调整（比如检查与margin: auto处于同一级别的所有子项的最常见偏移量，如果尚未找到，则通过较低元素递归）它可以在非常高的百分比中工作。时间。

此外，您可以先检查#content div是否存在margin: auto。

http://jsfiddle.net/WKgrY/1/

function findCentredLeft() {
    var aMargins = [];
    var bW = $('body').width();

    $els = $('div');

    $els.each(function (i, obj) {
        var objML = $(obj).css('marginLeft');
        aMargins.push(objML);
    });

    $('body').width(bW - 1);

    $els.each(function (i, obj) {
        if ($(obj).css('marginLeft') != aMargins[i]) {
            left = $(obj).offset().left
            return left;
        }
    });
    $('body').width(bW);
}

$(document).ready(function () {
    findCentredLeft();
    console.log(left);
});

Answer 3

如果有人想知道这一点，我已经创建并使用了这个功能：

function getContentDiv() {

        var mostProbable = jQuery('div').eq(0);
        var maxP = 0;
        var documentWidth = jQuery(document).width();
        var documentHeight = jQuery(document).height();

        jQuery('div').each(function () {

            var probability = 0;
            var t = jQuery(this);

            if (t.css('position') == 'static' || t.css('position') == 'relative')
                probability += 2;


            if (t.height() > documentHeight / 2)
                probability += 3;

            if (t.parent().is('body'))
                probability++;

            if (t.css('marginLeft') == t.css('marginRight'))
                probability++;


            if (t.attr('id') == 'content')
                probability += 2;


            if (t.attr('id') == 'container')
                probability++;

            if (t.width() != documentWidth)
                probability += 2;

            if (probability > maxP) {
                maxP = probability;
                mostProbable = t;
            }

        });
        return mostProbable;
    }

找到居中内容的X位置

3 个答案: