css

スタイルの変更を行うメソッド

書き方

jQueryObject.css('プロパティ名','値');

サンプル

$('.className').css('background-color', 'red');

// まとめてスタイルを指定する場合 （ハッシュオブジェクト形式でまとめて書く）
$('.className').css({
    backgroundColor : 'red',
    display : 'block',
    opacity : 0.5
});

プロパティ名をダブルクォーテーションで囲って指定した場合、
cssで使用しているプロパティ名と同様の記述で指定が可能。

プロパティ名をダブルクォーテーションで囲わない場合、
プロパティ名をキャメルケースで記述（'background-color' → backgroundColor）する必要がある。

ドキュメント

css リファレンス

show / hide

要素の表示／非表示（disiplay: block; , disiplay: none;）を変更するためのメソッド。

書き方

jQueryObject.show(); // 表示（disiplay: block;）
jQueryObject.hide(); // 非表示（disiplay: none;）

サンプル

$('.className').show();
$('.className').hide();

// 引数に数字を入れると指定された時間（ミリ秒）をかけて表示／非表示を行う
$('.className').show(500);
$('.className').hide(1000);

もともとの要素のdisplayの値を尊重します。
単純にdisplay : block; none の値を切り替えているのではなく、
その要素が元々持っているdisplayプロパティを記憶してくれており、
再び表示する際はそのプロパティに戻す、という動作をしてくれる。

例えばspan要素はもともとのdisplayの値はinlineのため、
一度noneにして非表示にして、再び表示する際は blockではなく、
inline-block の値に切り替えて表示を行う。

ドキュメント

show リファレンス
hide リファレンス

width / height

要素の幅、高さを指定するメソッド。

書き方

jQueryObject.width(幅);
jQueryObject.hide(高さ);

サンプル

$('.className').width(300);
$('.className').height(300);

// ピクセル以外の単位指定をしたい場合はシングルクォーテーションで囲んで指定を行う
$('.className').width('3em');
$('.className').height('auto');

jQueryでは何も単位の指定が無い時は'px'が自動的に補完されている様になっている。

ドキュメント

参考ドキュメント