jQuery　draggable,resizable　要素のサイズがずれる

uiプロパティ以外で要素のサイズ取得を試みる

draggableとresizableを使用し要素のサイズ変更や、移動後のサイズを取得するには
uiプロパティからアクセスするのが一般的かも知れませんが、cssでmarginやpaddingを指定した場合は
cssのプロパティを抜いた値しか取得できません。

何故かは分かりませんが、きっと親切設計なんだと思います。。。

動作環境、jQueryバージョン

jquery-1.9.1
Firefox 27.0.1

要素の横幅が100pxになるようにし、styleを設定した場合

・script
100px伸ばして計200pxになるようにした場合

[対象ノード].resizable({
 	// 一度に移動できる幅を固定
 	grid: [ 100, 100 ], 
 	stop: function(event, ui) {
	// ui.size['width']　188pxが返されます。
	// $(this)[0]['clientWidth']　188pxが返されます。
	}
});

今回は200pxの値が欲しいので、思った通りの結果になりません。
不足分の12pxを足せばそれで良いのですが、cssのプロパティ値に変更があった場合を考慮しちょっとコードを追加

$('.mn').resizable({
 	stop: function(event, ui) {
		var width = getNodeWidth($(this));
		//200が返ってきます
	}
});

// pxを外しnumberで返却 
function removePx(string)　{
	var s = string.replace("px", "");
	return Number(s);
};

// ノードの横幅を計算する
function getNodeWidth(node) {
 	//jqury1.9以降では一括で各値を取得できるようになりました。
 	var cscProperty = node.css(['width','margin-left','margin-right','padding-left', 'padding-right']);
	var width = 0;
	for (var i in cscProperty) width += removePx(cscProperty[i]);
	return width;
}

今回はwidthだけですが、heightも同じように取れると思います？
もっと簡単な方法が有れば良いのですが、取り敢えずぱっと思いついた処理でした。