jQueryでCSSのwidth, height を簡単に取得/設定する方法

今回は jQueryで width, height の値を簡単に取得する方法をご紹介します。

今まで私は、幅と高さを取得する際に次のように書いていました。

$(this).css("width");
$(this).css("height");

javascriptで取得する方法であるdocument.getElementByIdなどと比較すればこれでも簡単なのですが、もっと簡単に取得できる書き方を先日知りました。

$(this).width();
$(this).height();

これで取得できます。jQueryの基本的な書き方のようです。ちなみに値を設定するにはそれぞれ次のように書きます。

$(this).width(500);
$(this).height("300px");

単位なしで書くとpx単位での設定になります。もちろんpxを明示的に書いても設定することが出来ます。%, vh, vw なんかも設定できます。簡単ですね。

私が今まで実施していた書き方だと値を設定するには次のように書きます。

$(this).css("width", "500px");
$(this).css("height", "300");

これも単位なしで書くとpx単位での設定になります。これも、もちろんpxを明示的に書いても設定することが出来ます。やはり多少記述が長くなりますね。「塵も積もれば」で、この多少の違いは見過ごせません。

私がよくやっていることは.cssで値を動的に設定することです。

次のように値を変数にすることで動的に値を設定できます。

$(this).css("width", variable_width);

さらに、上記で変数にした部分は関数にすることも出来ます。関数の戻り値で値を設定するのです。

次のように値を関数の戻り値で設定することで動的に値を設定できます。

$(this).css("width", function(){
  return variable_width;
});

そして、意外と忘れがちなのが初期化です。

上記のようにjQueryを使って設定した値を初期化して元のCSSで設定していた値に戻したい。そんなときには次のように書きます。

$(this).css("width", "")

簡単ですね。この初期化の書き方でピンときた方もいるかと思いますが、.cssではCSS上で値を設定しているのではないのですね。HTML上にstyleで設定しているのです。.cssという書き方なのに、面白いですね。

以上、width, height の値を設定する色々な方法でした。なお、今回の処理については処理速度は意識していません。あくまで簡単に値を取得/設定する方法にフォーカスした内容です。

処理速度を意識するならjQueryでなく、javascriptで書いてしまった方が断然速いです。ですので、お手軽プログラミングでなく処理速度に厳密なプログラムを書く際にはjavascriptでゴリゴリ書いていくことをオススメします。

いつか処理速度を意識したjavascriptの記事も書きたいなぁ（´-`）.｡oO

生活情報オンライン