JavaScript

「offset」で取得した値を使い回す

offset_style

ちょっとはまったのでメモ。
以下のように「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. obj_clear.jpg

    JavaScript

    配列に入れた無名オブジェクトの値をクリアする

    オブジェクトの値を配列にいれて管理することってけっこうあります。…

  2. style_backgroundImage.jpg

    JavaScript

    背景画像をJavaScriptで入れ替える2種類の方法

    ものごとには「正解」というものがひとつではない、ってことが多いもん…

  3. about_debug-4.jpg

    JavaScript

    Android端末のデフォルト・ブラウザでJavaScriptのデバッグをする方法

    Webアプリをデザインするときに必須となるのがJavaScript…

  4. fb022d1ac056d555673c17937de7f431.png

    JavaScript

    強力なアニメーション用のJavaScriptライブラリー「TweenMax.js」が便利!

    jQueryでもアニメーションはできるのですが、それよりも表現力豊…

  5. data_access.jpg

    JavaScript

    JavaScriptでグローバル変数の使いどころを見直してパフォーマンスを改善する

    JavaScriptのコードの中では、どこにデータを格納するかでコ…

  6. js_global.jpg

    JavaScript

    JavaScriptでグローバル変数を減らす方法

    グローバル変数はいいことない!もしかしたら使っているライブラリー…

最近の記事

  1. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  2. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  3. コミックのイラストが新鮮だった!『MARVEL展』
  4. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  5. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. 日常

    ムダなジカン
  2. tweenmax_js_totation.jpg

    JavaScript

    【TweenMax.js】回転アニメーションも楽々!
  3. 日常

    じゅんちょう
  4. augm_tokyo_banner_m

    イベント

    AUGM Tokyo 2010でゼンハイザー「MM50 headset for …
  5. 日常

    Oxford City
PAGE TOP