Help us understand the problem. What is going on with this article?

[jQuery] スタイルを変更するメソッド

More than 1 year has passed since last update.

css

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

書き方

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

サンプル

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

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

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

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

ドキュメント

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 の値に切り替えて表示を行う。

ドキュメント

width / height

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

書き方

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

サンプル

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

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

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

ドキュメント

参考ドキュメント

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした