重要说明

Question

我有这样的标记

<div>
    <div>hello</div>
    <div>World</div>
</div>

我使用第一个div作为浮动右边，第二个使用浮动左边。

问题是要获得“World”div的结束角落的位置

我像这样使用了JS

var left = $('.inner-page-right-content').offset().left;
left = -(900- left);
$('#inner-page-container').css('background-position',left);

该代码适用于Chrome和Safari，但不适用于Firefox 它显示与窗口的实际距离（没有浮动）。

任何帮助或见解都将非常感激

Answer 1

这会在Chrome和Firefox中引发相同的结果

    <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>

        <style type="text/css"> 
         #hello {
            float: right;
            width: 100px;
            background: grey;
            color: white;
            text-align:center;
        }

        #world {
            float: left;
            width: 100px;
            background: grey;
            color: white;
            text-align:center;
        }

        #result {
            clear: both;
        }

        </style>  

        <script type="text/javascript">
            $(document).ready(function() {

                var oWorld = $("#world").get(0);
                var rect = oWorld.getBoundingClientRect();

                $("#result").html("top: "+rect.top+", Right: "+rect.right);
            });
        </script>

    </head>
    <body>
        <div>
            <div id="hello">hello</div>
            <div id="world">World</div>
        </div>
        <div id="result"></div>
    </body>     
</html>

Answer 2

您可以尝试getBoundingClientRect()

// Assuming your 'world' div has an id="world"
var rect = document.getElementBydId('world').getBoundingClientRect();

rect.left // x position of #world relative to viewport
rect.top // y position of #world relative to viewport
rect.width // width of #world, including padding and borders
rect.height // height of #world, including padding and borders
rect.offsetWidth // width of #world - IE8 and below
rect.offsetHeight // height of #world - IE8 and below

重要说明

左侧和顶部位置相对于视口，意味着不考虑滚动。添加滚动x和y值以获取真正的绝对位置。
考虑了CSS变换。

See the doc on MDN

Answer 3

尝试

dom.getBoundingClientRect()

您可以使用此方法获取dom的矩形。它包含左上方右下方位置相对于浏览器。

如何获得div的偏移位置 - 跨浏览器问题

3 个答案:

重要说明