JavaScript

jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便利です。ただ、CSSはCSSで完全に分けて管理したい場合にはaddClassなどでクラス名だけ与える方がいいかもしれないですね。ということで複数の値を設定する時のやり方です。

[ads_center]

CSSメソッドに値をハッシュ形式で渡す

ハッシュでの値の渡し方は、例えば「font-size」や「text-align」といった単語の区切りがハイフンで区切られているプロパティについて、単純に2つのプロパティ名の指定方法があります。1つはそのままハイフン形式を使う場合、もう一つはキャメルケースを使う場合です。

ハイフン形式で指定する場合

プロパティ名をハイフンで指定する場合はダブルクォーテーションで括る必要があります。

$(function(){
     $('p').css({
          'font-size' : '18px',
          'font-weight' : 'bold',
          'text-align' : 'center'
     });
});

一般的なCSSで指定するような感じですね。

キャメルケースで指定する場合

キャメルケースは単語の区切りを大文字で表します。実際のコードはこのようになります。

$(function(){
     $('p').css({
          fontSize : '18px',
          fontWeight : 'bold',
          textAlign: 'center'
     });
});

キャメルケースにする場合はプロパティ名はダブルクォーテーションで括る必要はありません。

CSSはCSSだけで管理したい

そんな時はaddClass()でクラス名を与えておいて、あとはスタイルシートでお好きに設定すればいいかと思います。

addClass()

$(function() {
     $('p').addClass('content');
});

これでp要素にcontentというクラスが付与されます。逆にクラスを削減したい場合はremoveClass()を使います。

removeClass()

$(function() {
     $('p.content').removeClass('content');
});

単純にaddClassとremoveClassを交互に切り替える場合にはtoggleClass()というのがあります。以下はクリックする度にcontentというクラスが追加、削減を繰り返します。

toggleClass()

$(function() {
     $('p').click(function(){
          $(this).toggleClass('content');
     });
});

jQueryを使えば簡単に色々な操作をすることができてとても便利ですね。toggleClass()は今後も結構使う機会がありそうな感じです。

関連記事

  1. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

  2. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  3. AJAX Live Search
  4. floatThead

    JavaScript

    テーブルのヘッダーを固定できるjQueryプラグイン「floatThead」

    floatTheadはテーブルのヘッダーを固定することができるjQue…

  5. Tipso

    JavaScript

    レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

    Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツー…

  6. Validatr

    JavaScript

    HTML5のinput属性による検証ができるフォーム実装「Validatr」

    Validatrは、HTML5のinput属性を用いて検証できるさまざ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP