読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

jQueryでposition leftの値を取得する時は、.css( )よりも.position( )を使う方がいい理由

どうも!chuckです。

コーディングしていて気づいたことがあるのでメモ。DOM要素のposition : leftの取り方について。(あるいはtopも同様)

 

 

position : leftとは

紛らわしくてスミマセン。正確にはposition属性をかけた要素のleft位置です。

 

取得方法

今回はjQueryを使用して値を取得したいと思います。

 

f:id:chuck0523:20150711135205p:plain

この画像で言うところの300pxを取得したいとしましょう。まず考えられる方法としては、やはり.css( )メソッドですね!

 

① .css( )メソッド

ただし、この方法にはデメリットが。

f:id:chuck0523:20150711135905p:plain

以上のように取得して、コンソールに表示してみます。すると、、、

f:id:chuck0523:20150711135926p:plain

なんと!300pxと表示されています。つまりint(数値データ)ではなくstring(文字列データ)として帰ってくるのです。

念のため検証してみましょう。

f:id:chuck0523:20150711140159p:plain

typeofを使ってデータ型を調べます。すると、、、

f:id:chuck0523:20150711140229p:plain

来ました!やはりStringでした。

 

値を取得して書き換えたいときなんかにちょっと不便ですよね。例えば、ボタンがクリックされたら、この要素をさらに移動させたいときなど。

強引に変換すると、以下のようになるかと思われます。

f:id:chuck0523:20150711140541p:plain

コードの後半では.slice( )メソッドを使っています。他の言語で言うところのsubstringにあたるのかな?? 

0文字目から-2文字目を切り出して、代入し直しています。-2文字とはつまり末尾の「px」を切り捨てています。

もちろん、文字列を変形しただけなのでデータ型はstringのままです。

f:id:chuck0523:20150711140829p:plain

 

ただし、JavaScriptはデータ型を自動で変換してくれます!(´;ω;`)

なので、例えば先頭にマイナスをつけることで、符号が反転の際に数値に変換されます。

f:id:chuck0523:20150711141449p:plain

 

この出力結果がこちら。

f:id:chuck0523:20150711141511p:plain

きちんと数値に変換されているのが確認できます。でも、いちいちこの作業をするのは面倒ですよね…。というわけでオススメしたいのが次の方法ですヽ(=´▽`=)ノ

 

②.position( )メソッドを使う。

jQueryのpositionメソッドを使うと、cssメソッドよりも数値データの取得が容易です。

 

f:id:chuck0523:20150711142134p:plain

ただし、この結果返ってくるのはオブジェクトです。

f:id:chuck0523:20150711141830p:plain

慣れてない人は慌ててしまうかもしれませが、大丈夫です!きちんと格納されています。

f:id:chuck0523:20150711141932p:plain

leftのみならずtopまで入っていますヽ(=´▽`=)ノ

 

オブジェクトの操作は . (ドット)で値を取得するので、以下のように記述します。

f:id:chuck0523:20150711142255p:plain

 

コンソールで確認してみると、ちゃんと取得できていることがわかります。

f:id:chuck0523:20150711142321p:plain

きちんと数値データで取得できていますね!これならすぐに演算に使用することができますヽ(=´▽`=)ノ

 

まとめ的な

というわけで数値データとしてpositionの値がほしい時は.position( )を使用しましょう!

 

参考にしたサイト様

d.hatena.ne.jp