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. Ideal Image Slider

    JavaScript

    シンプルで動きが滑らかなスライダー「Ideal Image Slider」

    Ideal Image Sliderはレスポンシブに対応したシンプルで…

  2. FlexSlider

    JavaScript

    jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法

    すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探し…

  3. simplePagination.js
  4. blurify

    JavaScript

    画像にぼかし効果を実装できる軽量のJSライブラリ「blurify」

    blurifyは画像にぼかし効果を実装することができるJSライブラリで…

  5. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

コメント

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

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

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP