jQuery【 CSS 】スタイルを動的に変更する

colmun_main9488

jQuery は セレクタで対象となる要素を特定するので、同じようにセレクタを使用する CSS と相性が良く、シンプルな記述で CSS を動的に設定することができます。
今回は、jQuery を使用して CSS の設定を行う方法を紹介したいと思います。

目次

1.jQuery で CSS を設定
2.css メソッド
3.addClass メソッド
4.removeClass メソッド
 
  

1.jQuery で CSS を設定

 
jQuery は CSS と同様にセレクタで HTML要素を特定するので、CSS の設定もスムーズに行うことができます。

jQuery では、主に次のメソッドを使用して CSS の設定を行います。

●css( )
style 属性を直書きする場合に使用

●addClass( )
既存の CSS クラスを追加する場合に使用

●removeClass( )
既存の CSS クラスを削除する場合に使用

▲目次へ戻る

 

2.css メソッド

CSS プロパティと値を設定

jQuery で style 属性を直書きする形で CSS の設定を行う場合は、css メソッドを使用して 次のように記述します。

$("div").css("width", "300px");

css メソッドの 第1引数にプロパティ名を 第2引数に値を 記述して、CSS プロパティの値を設定することができます。
第2引数に数値を設定する場合は、引用符( ” ” や ‘ ‘ )無しでもOKです。

次のように記述して 複数の CSS を設定することもできます。

$("div").css({"width":"300px", "height":"50px"});

 

算術複合代入子を利用して値を設定

算術複合代入子を利用して CSS プロパティの値を設定することができます。
算術複合代入子を使用する場合は、次のように記述します。

$("div").css("width", "+=10");

上のサンプルでは、jQuery が実行される度に div要素の幅が 10px ずつ増加します。

「 += 」のような算術複合代入子を使用する場合は、引用符( ” ” や ‘ ‘ )を付けて値を設定する必要があります。
 

Object オブジェクトを利用してプロパティを一括設定

次のように記述して 複数の CSS プロパティをまとめて設定することもできます。

$("div").css(wkCss);

wkCss = new Object();
wkCss.width = 300;
wkCss.height = 50;
wkCss.backgroundColor = "gray";

 

値に function を設定

css メソッドの第2引数に ユーザ定義関数を設定することもできます。
ユーザ定義関数を設定する場合は、次のように記述します。

$("div").css("height", funcCss);

function cssFunc(index){
    return (index+1)*20;
}

ユーザ定義関数 cssFunc は、インデックス番号に 1 足した数値に 20 をかけた値を返す関数ですので、この jQuery が実行される度に div要素の高さが 20px、40px、60px、 と変化します。
 

CSS の設定を削除

css メソッドで設定したCSS の設定は、空の文字列を設定すると削除できます。

$("div").css("width", "");

但し、この方法は、css メソッドで設定したCSS に対してのみ有効ですのでご注意下さい。

▲目次へ戻る

 

3.addClass メソッド

 
CSS が設定されているクラスを指定して jQuery で CSS を設定することができます。
クラスを指定し CSS を設定する場合は、addClass メソッドを使用して次のように記述します。

$("div").addClass("width300");
.width300 {
    width:300px;
}

上のサンプルでは、jQuery が実行されると div要素の幅が 300px になります。

▲目次へ戻る

 

4.removeClass メソッド

 
CSS が設定されているクラスを指定して jQuery で CSS を削除することができます。
クラスを指定し CSS を削除する場合は、removeClass メソッドを使用して次のように記述します。

$("div").removeClass("width300");
.width300 {
    width:300px;
}

上のサンプルでは、jQuery が実行されると div要素の幅が ブラウザ依存のデフォルト幅 になります。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です