どうも！chuckです。
コーディングしていて気づいたことがあるのでメモ。DOM要素のposition : leftの取り方について。（あるいはtopも同様）
position : leftとは
紛らわしくてスミマセン。正確にはposition属性をかけた要素のleft位置です。
取得方法
今回はjQueryを使用して値を取得したいと思います。
この画像で言うところの300pxを取得したいとしましょう。まず考えられる方法としては、やはり.css( )メソッドですね！
① .css( )メソッド
ただし、この方法にはデメリットが。
以上のように取得して、コンソールに表示してみます。すると、、、
なんと！300pxと表示されています。つまりint(数値データ)ではなくstring(文字列データ)として帰ってくるのです。
念のため検証してみましょう。
typeofを使ってデータ型を調べます。すると、、、
来ました！やはりStringでした。
値を取得して書き換えたいときなんかにちょっと不便ですよね。例えば、ボタンがクリックされたら、この要素をさらに移動させたいときなど。
強引に変換すると、以下のようになるかと思われます。
コードの後半では.slice( )メソッドを使っています。他の言語で言うところのsubstringにあたるのかな？？
0文字目から-2文字目を切り出して、代入し直しています。-2文字とはつまり末尾の「px」を切り捨てています。
もちろん、文字列を変形しただけなのでデータ型はstringのままです。
ただし、JavaScriptはデータ型を自動で変換してくれます！(´；ω；｀)
なので、例えば先頭にマイナスをつけることで、符号が反転の際に数値に変換されます。
この出力結果がこちら。
きちんと数値に変換されているのが確認できます。でも、いちいちこの作業をするのは面倒ですよね…。というわけでオススメしたいのが次の方法ですヽ(=´▽`=)ﾉ
②.position( )メソッドを使う。
jQueryのpositionメソッドを使うと、cssメソッドよりも数値データの取得が容易です。
ただし、この結果返ってくるのはオブジェクトです。
慣れてない人は慌ててしまうかもしれませが、大丈夫です！きちんと格納されています。
leftのみならずtopまで入っていますヽ(=´▽`=)ﾉ
オブジェクトの操作は . (ドット)で値を取得するので、以下のように記述します。
コンソールで確認してみると、ちゃんと取得できていることがわかります。
きちんと数値データで取得できていますね！これならすぐに演算に使用することができますヽ(=´▽`=)ﾉ
まとめ的な
というわけで数値データとしてpositionの値がほしい時は.position( )を使用しましょう！
参考にしたサイト様
