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. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  2. FitVids.JS

    JavaScript

    YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVid…

    YouTubeやVimeoからの埋め込み動画をレスポンシブに対応させる…

  3. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

  4. jQuery Countdown

    JavaScript

    手軽に使えるカウントダウンタイマーを実装できる「jQuery Countdown」

    jQuery Countdownは手軽に使えるカウントダウンタイマーを…

  5. Effect Ideas for Card Stacks
  6. SuperEmbed.js

    JavaScript

    さまざまな埋め込み動画をレスポンシブで表示できる「SuperEmbed.js」

    SuperEmbed.jsは、さまざまな埋め込み型の動画をレスポンシブ…

コメント

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

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

最近の記事

  1. カメラマングローブ Grip Hot Shot III
  2. 包(つつむ)巾着ポーチ
  3. KMC-80BK
  4. 味噌ラーメン〜旨辛にんにく味噌〜

Instagram始めました

Facebookページ

PAGE TOP