scaleで縮小しているエリアのoffsetTopが正しく取得できない

Question

下記のCSSで縮小したエリアの中にある#hogehogeの座標を取得したいのですが、
取得した値が正しくありません。

●css

#hogearea{
transform: scale(0.5);
transform-origin: 0 0 0;
}

●javascript
var PosY = $('#hogehoge').get( 0 ).offsetTop;
var PosX = $('#hogehoge').get( 0 ).offsetLeft;

●html

<div id="hogearea"> <span id="hogehoge">hoge</span> </div>

正しく#hogehogeの座標を取得するにはどうしたらよいでしょうか。

Answer 1

position: absolute;でずらしていた分だけ値がずれておりました。
$("hogehoge").offset().left;
$("hogehoge").offset().top;
で取得した値にずらしていた分だけ足すと解決致しました。

ありがとうございます。

Answer 2

具体的にどんな値が出るのでしょうか??

http://semooh.jp/jquery/api/css/offset/_/

このサイトを見る限り、

$("hogehoge").offset().left;
$("hogehoge").offset().top;

で取得した値をconsoleで表示すればいいと思うのですが。

console.log("TOP:"+$("hogehoge").offset().top+"LEFT:"+$("hogehoge").offset().left);

Comments

[rui123]

ありがとうございます。

$("hogehoge").offset().left;
$("hogehoge").offset().top;

の方法でも取得してみました。
ですが、のぞんでいる値を取得することができませんでした。

具体的には、
left:234となってほしいところが,left:220となってしまいます。
topも同様にtop:700となってほしいところがtop:350となってしまいます。
毎回取得できている値は同じになります。