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. JavaScript

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

    ちょっとはまったのでメモ。以下のように「offset」と「sty…

  2. JavaScript

    WebアプリのデバッグをChromeでやるために「touch events」を有効化する方法

    Webアプリのデバッグは「Chrome」をいつも使ってます。その…

  3. JavaScript

    クエリーストリングを利用してWebページ間でデータを受け渡してみる

    「クエリーストリング」っていうのは以下のようなGoogleで検索し…

  4. JavaScript

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

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

  5. JavaScript

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

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

最近の記事

  1. ホワイトハウスコックスの財布
  2. 進撃の巨人展FINAL チラシ
  3. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  4. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  5. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  6. 【コレクション】カードダス:SDガンダム外伝シリーズ
  7. 懐かしい!!カードダスSD戦国伝!!

アーカイブ

  1. 日常

    「本について」
  2. 冬の文化祭

    イベント

    冬の文化祭2011(ウェブコンポーザー学校)
  3. 心が晴れる! くたびれたシューレースを変えよう!

    ファッション

    心が晴れる! くたびれたシューレースを変えよう!
  4. グルメ

    たけのこの里「クッキー&クリーム」がうまかわいい
  5. 【無印良品】ジム&銭湯用に「小分けボトル 100ml」を買ってみた

    無印良品

    【無印良品】ジム&銭湯用に「小分けボトル 100ml」を買ってみた
PAGE TOP