2016/10/18 20:28:27

jQueryのCSSメソッドの引数に変数を与える場合

jQuery_logo.svg
目次(クリックするとジャンプします)
  • 1:jQueryのCSSメソッド
  • 2:引数は「文字列リテラル」
  • 3:変数を使って値を与えてみる
  • 3.1:変数を引数にしてみる
  • 3.2:単位補完
  • 4:複数値の場合
  • 4.1:複数値でも同じく文字列リテラル
  • 4.2:一部分だけ変数にしてもOK

jQueryのCSSメソッド

jQueryのCSSメソッドはcssを操る時便利ですよね。cssメソッドで変数を扱えるとなおさら便利になります。

しかし意外とこの変数を使うというのが初心者にはハードルになるようで、躓きの原因になるそうです。たしかに@MINOもハマった記憶があるな…。

今回はjQueryのcssメソッドでどのようにして引数に変数を与えるのかをまとめてみました。

cssメソッドは以下のような感じで使います。第一引数にプロパティ、第二引数に値です。これが基本形です。

$(".pain").css("width", "100%");

引数は「文字列リテラル」

jQueryは多くの場合、文字列リテラルを引数にとります。

文字列リテラルとは「文字列として解釈される値」のことです。で囲まれているのは文字列リテラルとなります。

よく見ると、セレクターもプロパティも値もで囲まれていますから、全部文字列リテラルということになります。

すごく簡単に言えば「文字で命令している」みたいな感じです。

変数を使って値を与えてみる

では変数をつかって値を与えたい場合はどうなるのでしょう?

これも深く考える必要はなくて、「値となる文字列を変数に入れて引数にすれば良い」です。

変数を引数にしてみる

以下の例を考えてみます。

var painAHarfWidth = $( "#painA" ).width() * 0.5;
 $( "#painB" ).css( "width" , painAHarfWidth );

painAHarfWidthpainA要素の幅の半分を代入しています。それをcssメソッドの値としています。

ここで気づいた方もいると思いますが、$( "#painA" ).width() * 0.5の結果は数字です。文字列ではありません。なんの単位も付いていません。

普通に考えたら以下の様に何の単位も無い数字が入ってしまってcssが有効にならないはずです。

 $( "#painB" ).css( "width" , 100 );

しかしこれでも問題なくcssが効きます。

単位補完

実はjQueryはとても親切で、値を可能な限り有効な文字列リテラルに変換してくれる機能を持っています。

もし値が数字の場合pxを付けてくれるのです。jQueryの場合 、数字+文字列は文字列になりますから、文字列リテラルとして値が与えられることになります。

つまり以下のような感じで値が与えられるということですね。

 $( "#painB" ).css( "width" , "100px" );

jQueryの内部で以下と同じようなことをしてくれているのです。

var painAHarfWidth = ($( "#painA" ).width() * 0.5) + "px";
 $( "#painB" ).css( "width" , painAHarfWidth );

ただし補完は"px"だけなので、他の%emなどの単位の場合はちゃんと文字列を仕立てる必要があります。

//#painAの幅100px、#painCの幅200pxだとして…

var painADivCWidth = (($( "#painA" ).width() / $( "#painC" ).width()) * 100)+ "%"; //painADivCWidth = 50%
 $( "#painB" ).css( "width" , painADivCWidth );

これでどんな単位でも大丈夫です。

複数値の場合

marginpaddingborderなど複数の値を設定したいプロパティもあります。

margin:5px 2px 3px 10px;
padding:5px 20px;
border:1px solid #333333;

複数値でも同じく文字列リテラル

これも文字列リテラルに仕立てることでOKです。すなわちこうです。

var marginValue = "5px 2px 3px 10px";
 $( "#painA" ).css( "margin" , marginValue );

var paddingValue = "5px 20px";
 $( "#painA" ).css( "padding" , paddingValue );

var borderValue = "1px solid #333333";
 $( "#painA" ).css( "border" , borderValue );

一部分だけ変数にしてもOK

ではさらに応用です。例えば

margin:5px 2px 3px 10px;

の`margin-bottomに相当する場所(3px)だけ変数で書き換えたいとしたらどうでしょう?

これも文字列を仕立てることでできます。こんな感じです。

var marginBottom  =  $( "#painA" ).width() * 0.05;
var marginValue      = "5px 2px "+ marginBottom +" 10px";
 $( "#painA" ).css( "margin" , marginValue );

marginValueに代入する際に、"5px 2px "" 10px"は空白が含まれていることがおわかりでしょうか?なぜこんな空白が必要かというと、有効な値にするためなのです。

もし空白がない場合は変数に以下のような状態で代入されてしまい、有効な値になりません。(pxは上記の説明のとおり自動で付きます)

//くっついてしまっている
5px 2px8px10px

有効な値になるように文字列を仕立てることが重要です。

まとめ

慣れると結構楽に値を与えることができるのではないかと思います。有効な値になるように文字列を考える様にしましょう。

  • jQueryのメソッドの引数の多くは文字列リテラル
  • 文字列リテラルとはまんま文字列のこと
  • 単位が付いていない場合jQueryでpxを補完してくれる
  • 引数の一部だけを変数することも可能
  • ともかく有効な文字列になるようにする