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

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

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);

以下が取得結果。

153
196
153.28406836px
196.45974376px

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

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

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

//新しいオブジェクト
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;
}

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