Warning: Parameter 1 to multibyte_patch::wplink_js() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579

Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579
「offset」と「style」で取得する値が違う | Crunchlog
Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579

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. data_access.jpg

    JavaScript

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

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

  3. oncomplete_function.jpg

    JavaScript

    【TweenMax】「onComplete」で引数を使う方法

    TweenMaxの「onComplete」で引数を使いたい場合って…

  4. scope.jpg

    JavaScript

    JavaScriptでは「変数のスコープ」を正しく理解してエラーを減らそう!

    変数の「スコープ」は正しく理解しないと、エラーにならないエラーが起…

  5. parseInt.jpg

    JavaScript

    JavaScriptでローカルストレージを使うときに覚えておきたい文字列型から数値型への変換方法

    HTML5を使ったWebアプリをデザインしているときに必要だったの…

  6. fb022d1ac056d555673c17937de7f431.png

    JavaScript

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

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

最近の記事

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

アーカイブ

  1. freitag_repair2-2.jpg

    プロダクト

    【F】ヤフオクで落札したボナンザ(FREITAG F33 BONANZA)を修理…
  2. 日常

    飲み明け
  3. sf_tcard-1.jpg

    プロダクト

    普通のTカードに飽きたから「お父さんTカード」もらってきた
  4. ナイトライダーネクスト

    日常

    ナイトライダー ネクストがキタ!!
  5. 20130923160422.jpg

    iOS

    Xcode5でステータスバーを非表示にする方法
PAGE TOP