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()は今後も結構使う機会がありそうな感じです。

WordPressでウィジェットのアーカイブを一発でドロップダウンにする超簡単な方法前のページ

当ブログのWordPressオリジナルテーマのデザインを新しくしてみました次のページ

関連記事

  1. slider Menu

    JavaScript

    メニューリストをスライダーメニューにするjQueryプラグイン「slider Menu」

    slider Menuはメニューリストをスムーズにスライダーメニューに…

  2. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

  3. Smooth Scroll behavior polyfill
  4. jquery countDownTimer
  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

  6. jCider

    JavaScript

    レスポンシブ対応のjQueryカルーセルプラグイン実装「jCider」

    jCiderはレスポンシブ対応のシンプルなカルーセルを実装できるjQu…

コメント

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP