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. SVG 3D Tag Cloud jQuery Plugin
  2. jExcel

    JavaScript

    Excelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」

    jExcelは、ブラウザにExcelと互換性のあるスプレッドシートを埋…

  3. Zoomify

    JavaScript

    画像ズーム効果によるシンプルなライトボックスを実装できる「Zoomify」

    Zoomifyは、画像のズーム効果を備えたシンプルなライトボックスのた…

  4. Multi-Step-Form-Js
  5. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

  6. no-image

コメント

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

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

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP