2

このようなマークアップがあります

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

最初の div をフロート右として、2 番目の 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 では機能しません。

どんな助けや洞察も本当に感謝しています 画像

4

3 に答える 3

2

これにより、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>
于 2013-09-06T13:41:34.377 に答える
1

あなたは試すことができます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 変換が考慮されます。

MDN のドキュメントを参照してください

于 2013-09-06T13:26:35.850 に答える
1

試す

dom.getBoundingClientRect()

このメソッドを使用して、dom の長方形を取得できます。ブラウザに対する左上、右下の位置が含まれます。

于 2013-09-06T13:26:54.337 に答える