14

ここに画像の説明を入力

スタイル設定された要素の実際の X および Y 位置を JavaScript (または jquery ショート コード) で取得したいと考えています。

var offset = obj.offset();
  ox=offset['left']; 
  oy=offset['top']; 

  px=parseInt(obj.css('padding-left')); // padding left
  py=parseInt(obj.css('padding-top')); // padding top
  bx=parseInt(obj.css('border-width') ); // stroke value
  ox=ox+px+bx;
  oy=oy+py+bx;

しかし、このコードは時々動作しません..

上にスクロールまたは左にスクロールすると、実際の位置が取得されません:(

私を助けてください..

4

3 に答える 3

16

オフセットを使用する必要はありません。最新のgetBoundingClientRect関数を使用します。

function getPosition( element ) {
    var rect = element.getBoundingClientRect();
    return {
        x: rect.left,
        y: rect.top
    };
}

次に、上記の関数を次のように使用できます。

var element = document.getElementById( 'myElement' );
var pos = getPosition( el );

// Alert position in X axis
alert( pos.x );

// Alert position in Y axis
alert( pos.y );

すべてのブラウザで動作

編集:ページ スクロールに関する要素の位置が必要な場合は、document.body.scrollTopY 位置とdocument.body.scrollLeftX 位置に追加するだけです。

于 2016-11-21T16:15:43.190 に答える
-1 
     var offset = obj.offset();
      ox=offset['left']; = document.getElementById('Mypicture').offsetLeft;
      oy=offset['top'];  = document.getElementById('Mypicture').offsetTop;
    px=parseInt(obj.css('padding-left')); // padding left
    py=parseInt(obj.css('padding-top')); // padding top
    bx=parseInt(obj.css('border-width') ); // stroke value
    ox=ox+px+bx;
    oy=oy+py+bx;

//Two codes get equal value;  But Not Real clientX ClientY positions..

// 私のhtml:

    <div id="container">
    <img id="Mypicture" src="myimage.jpg"  alt="The source image for paint"/>
    </div>

//My css :

  #Mypicture{
  margin:100px;
  padding:20px;
  border: 20px solid #cacaca;
  }

  #container {
  display:block;
  background:#ffaaff;
  width: 550px;
  padding:50px;
  margin-left:300px;
   }

// Document 上の Mypicture の realx と realY の値を取得したい。// すべてのコードが機能します Realx ( ox ) は真の値を返しますが、RealY (oy) はほぼ 10px の false;

于 2013-04-04T18:55:55.070 に答える
-1

ドキュメントに対する要素からのオフセットが必要になります。パディング、マージン、ボーダーなどのスタイルがオフセットの結果に大きく影響する可能性があることに注意してください。オフセットのオンまたはオフを計算したい場合があります。

最後に、パディングとボーダーを内側にプッシュする を使用しているかどうかを確認する必要がありますbox-sizing(最も一般的なバージョンでbox-sizing: border-box;)。

document.getElementById('cloud').offsetLeft; //offsetTop

実際のオフセットが得られるまで、他のスタイル (加算/減算) でデバッグするだけです。私はほとんどの場合、スクリーンショットを作成して (または OS X の選択的スクリーンショット機能を使用して) オフセットが正しいかどうかをテストし、他のスタイルでオフセットが正しく計算されている (ピクセルをカウントしている) かどうかを確認します。

以下に少し例を示します。

CSS

#cloud {
    height: 500px;
    width: 500px;
    margin: 20px auto;
    border: 1px dotted #CCC;
}

HTML

<body>
    <div id="cloud">
        <div id="centerBox"></div>
    </div>
</body>

JavaScript

'use strict';

console.log(document.getElementById('cloud').offsetLeft);
console.log(document.getElementById('cloud').offsetTop);

出力

main.js: 1 >>> 372
main.js: 2 >>> 20

ここで面白いことに、 がoffsetLeft原因で動作するかどうかを簡単にテストできますmargin: 20px auto;。ウィンドウのサイズを変更すると、別のoffsetLeft.

于 2013-04-04T16:30:48.820 に答える