JavaScript

「offset」と「style」で取得する値が違う

offset_style_data

ちょっとはまったのでメモ。
以下のように「offset」と「style」で取得する値が根本的に違うことに気がつかないとはまっちゃいます。
以下の場合はどちらもオブジェクトの座標を取得しようとしてます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var item = document.getElementById( 'item' );
 
//「offset」の場合
var item_left1 = item.offsetLeft;
var item_top1 = item.offsetTop;
 
//ログをはきだす
console.log(item_left1);
console.log(item_top1);
 
//「style」の場合
var item_left2 = item.style.left;
var item_top2 = item.style.top;
 
//ログをはきだす
console.log(item_left2);
console.log(item_top2);

以下が取得結果。

1
2
3
4
153
196
153.28406836px
196.45974376px

「offset」は整数のみを取得しています。
「style」は小数点まで取得し、しかも「px」という表記まであります。

なので「style」で取得した値を計算しようとすると「NaN」と返ってきちゃうので気をつけましょう。

取得した値をなにか別のオブジェクトに補正をかけてからセットしたいなら以下のような感じ。
「offset」で取得した値に補正をかける関数を経由させて、
「style」で座標をセットしてます。

1
2
3
4
5
6
7
8
9
10
11
12
//新しいオブジェクト
var new_item = document.getElementById( 'new_item' );
 
//新しいオブジェクトに座標をセット
new_item.style.left = set(item_left1) + 'px';
new_item.style.top = set(item_top1) + 'px';
 
//座標を半分にする
function set(valueA) {
    var a = valueA / 2;
    return a;
}

他にもいいやり方はありそうですが、
私が今回やったのはこんな感じでした。

関連記事

  1. canvas.jpg

    JavaScript

    WebアプリでCanvasを使うための指定方法

    Webアプリをデザインするときのお決まりになりつつあるHTML5の…

  2. js_style.jpg

    JavaScript

    CSSのプロパティをJavaScriptで指定する

    Elementオブジェクトのstyleプロパティでその要素に対し…

  3. getElementById

    JavaScript

    JavaScript内で、HTMLのIDを直接指定したらダメ

    Webアプリをデザインしていて、JavaScriptの記述について…

  4. tweenmax_js_oncomplete.jpg

    JavaScript

    【TweenMax.js】アニメーション終わりに関数を呼び出す!

    最近はWebアプリでアニメーションが必要になったときに、「Twen…

  5. js_comment.jpg

    JavaScript

    JavaScriptでコメントは「/* */」をなるべく使わないようにしたい

    コメントには囲った部分をすべてコメントにする「/* */」と、1…

  6. 20120826222152

    JavaScript

    JavaScriptでテキストボックスから値を取得する

    テキストボックスに入力された値を取得します。Elementオブジ…

最近の記事

  1. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  2. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  3. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  4. 【コレクション】カードダス:SDガンダム外伝シリーズ
  5. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  6. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  7. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  8. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  9. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  10. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」

アーカイブ

  1. aero-1.jpg

    グルメ

    夏はすぎましたが「エアロ チョコミント」がすっきり涼感あるチョコでした
  2. fancybox-for-wordpress.jpg

    WordPress

    超オススメ! カスタマイズも可能なLightBox風WPプラグイン「FancyB…
  3. 【IKEA】お得な2ピースでローテ可能な枕カバー「DVALA(ドヴァーラ)」

    IKEA

    【IKEA】お得な2ピースでローテ可能な枕カバー「DVALA(ドヴァーラ)」
  4. lego_hayabusa-8.JPGlego_hayabusa-8.jpg

    LEGOはやぶさ

    LEGOはやぶさを実家と親戚に納品してきた♪
  5. pocarisweat_bottle-1.jpg

    プロダクト

    風邪を引いたときの水分補給にも使える「ポカリスエット スクイズボトル」
PAGE TOP