レスポンシブデザインやアニメーションを使ったサイトを構築する場合、要素の横幅を取得し利用する必要が出てきます。 今回はjQueryで横幅を取得する方法を紹介したいです。
widthを取得する
.width()でwidth値を取得してみる
<div class="hoge"></div>のwidth値を取得する場合を想定。以下の様に記述します。
//width値を取得する
var div_width = $( ".hoge" ).width();これで数値としてwidth値を取得することができます。 なんらかの計算で用いる場合はこちらの方法で取得するのが望ましいです。
取得される値はmargin,border,paddingを省いた横幅となります。これはcssのbox-sizingでborder-boxを指定してもmargin,border,paddingは省かれた幅になるので注意が必要です。
.outerWidth()でwidth値を取得してみる
margin,border,paddingを含めた値を取得できないのは具合が悪いです。そこで.outerWidth()の出番です。.outerWidth()はデフォルトではborder,paddingを含めた値を取得できるが、引数にtrueを指定するとmargin,border,paddingを含めた値を取得できます。
具体的には以下の様に記述することになります。
//border,paddingを含めた値を取得する場合
var div_width = $( ".hoge" ).outerWidth();
//margin,border,paddingを含めた値を取得する場合
var div_width = $( ".hoge" ).outerwidth(true);.innerWidth()でwidth値を取得してみる
.width()と.outerWidth()を紹介したが、それだけではpaddingだけを含めた値を取得する手段が無いです。paddingを含めた値を取得するには.innerWidth()を使うと良いです。
具体的には以下の様に記述することになります。
//paddingを含めた値を取得する
var div_width = $( ".hoge" ).innerWidth();取得できる値の範囲のまとめ
取得できる値の範囲に混乱してしまいそうなので、まとめてみましました。
.outerWidth(true) margin,border,paddingを含めた値.outerWidth() border,paddingを含めた値.innerWidth() paddingを含めた値.width() margin,border,paddingを省いた値.css( “width” )でwidth値を取得してみる
jQueryでは.css(“width”)でもwidth値を取得することができます。
//width値を取得を取得する
var div_width = $( ".hoge" ).css( "width" );この方法でwidth値を取得した場合、数値に"px"が付いてきます。 その為、素直に数値として使うことができないです。
もし何らかの理由で.css("width")で取得した値を計算に利用したい場合は、javascriptの関数parseInt()を使用して文字列を数値に変換する必要があります。
var div_width = $( ".hoge" ).css( "width" );
var div_width_int = parseInt( div_width , 10 );parseInt()の第一引数は変換したい文字列、第二引数は基数を指定します。 10としているのは10進数で変換することを意味します。
省いても動作しますが、ブラウザによって第二引数のデフォルトが8(8進数)である場合もあるようで、泣きそうになる事があるので出来るだけ指定するようにした方が良いです。
この関数で処理することで"px"を外すことができます。
まとめ
レスポンシブデザインの台頭で要素の大きさを取得する必要性が大きくなってきています。動的なレイアウトに欠かせないことでもありますので、使い分けが少々面倒ですが、しっかりと使えるようにしておきたいと思います。
