新潟県妙高市|ホームページと広告の相談相手

MENU [+]閉じる [×]
jQueryでCSSのスタイル定義を追加・変更・削除する方法【jQuery&CSS3】

ユーザーの方の操作に応じて、Webページ内の表示や動きを制御するホームページは、今ではよく見受けられます。

それらを実現している要素は「jQuery&CSS」です!

今回は、jQueryでCSSのスタイル定義を追加・変更・削除する方法をご紹介したいと思います。

この記事の目次

[基本]jQueryでCSSを操作する(主な)2つの方法

jQueryでCSSのスタイル定義を追加・更新・削除する方法は、主に2つあります。

1つ目が「jQueryの記述内でCSSのスタイル定義を追加する」という方法です(^^)

例えば、

「色は青」

「線の太さは初期状態の3pxから、ここだけ5pxに変更」

「このクラス名の要素だけ、font-weightの定義を削除する」

など、個々のスタイル定義を追加・更新・削除することができます。

スタイル定義の追加・更新・削除の種類がごくわずかな場合、例えば「このページの数カ所だけ!」のような場合は楽な場合も多くあります。

一方で、スタイル定義の追加・更新・削除のエリアが複数ページや広い範囲に及ぶ場合ほど、メンテナンス性に欠ける場合があるのが難点です。

そして2つ目が「jQueryの記述内でCSSのスタイル定義に関係するクラス名を追加する」という方法です(^^)

1つ目の例では「CSSのスタイル定義」を追加する例を紹介しましたが、2つ目の例で追加するのは「CSSのクラス名」です。

つまり、表現したいCSS定義をもったクラス名を、あらかじめCSSファイルで定義しておく方法です。

そのようにすることで「スタイル定義はCSSでやる!」という風に、ファイルの種類によって役割を分業させることができます。

スタイル定義の追加・更新・削除のエリアが多岐に及ぶ場合にも、この方法が適していると考えられます。

一方で「わざわざCSSにクラス名を書くほどじゃない」のように該当箇所が少ない場合は、1つ目の「CSSのスタイル定義を追加する方法」が向いていると言えるでしょう。

このあと、2つの方法それぞれの具体的なjQueryの記述方法をご紹介します。

「ボタン」を押して、別の要素のCSSスタイル定義を追加・更新・削除するイメージでお話ししていきます( ̄▽ ̄)

ページの先頭へ戻る

[方法1]cssメソッドを使って、特定の要素のCSSのスタイル定義を追加・更新・削除する方法

CSSのスタイル定義を「1種類だけ」追加するならプロパティと値をカンマ区切りにする

まずは、cssメソッドを用いて「CSSのスタイル定義を追加する方法」からご紹介します。

スタイル定義を1種類だけ追加したい場合は、そのプロパティを値の組をカンマ区切りで表現します。

$(".button").click(function () {
	$('.className').css('property01','value01');
});

例えば、文字の色を赤くしたい場合は、コレでいけるハズです。

$(".button").click(function () {
	$('.className').css('color','red');
});

CSSのスタイル定義を「複数」追加するならプロパティ&値の組をカンマ区切りにする

スタイル定義を複数の種類追加する場合は、これが基本となります。

$(".button").click(function () {
	$('.className').css({'property01':'value01','property02':'value02'});
});

例えば、文字を青にして、文字の太さをboldにするなら、コレでいかがでしょうか。

$(".button").click(function () {
	$('.className').css({'color':'blue','font-weight':'bold'});
});

CSSのスタイル定義を削除するなら、そのプロパティの値の欄は「空」にする

スタイル定義を追加も更新もせず、ただ「いろいろ追加や更新されたスタイル定義を削除したい」という場合も、時々あるかと思います。

その場合は、削除して初期状態に戻したいスタイル定義のプロパティに対応する値を「空(カラ)」にしてみましょう。

$(".button").click(function () {
	$('.className').css('property01','');
});

文字の色を初期状態に戻す場合は、コレでいけるハズです。

$(".button").click(function () {
	$('.className').css('color','');
});

ページの先頭へ戻る

[方法2]クラス名編集用の各メソッドを使って、特定の要素のCSSのスタイル定義を追加・更新・削除する方法

addClassメソッド〜特定の要素にクラス名を追加する〜

次に、「CSSのスタイル定義に関係するクラス名を追加する方法」のご紹介です。

まずはaddClassメソッドから。

こちらのコードで、特定の要素に[cnAdd]というクラス名を追加できます。

$(".button").click(function () {
	$('.className').addClass("cnAdd");
});

これにより、CSSファイル内には[cnAdd]というクラス名のスタイル定義を記述しておいて、

「色はコレで、幅は@@pxで……」

と記述しておけば、jQueryファイル内でスタイル定義を書かなくても済みます。

removeClassメソッド〜特定の要素のクラス名を削除する〜

一方で、クラス名を削除することでCSSのスタイル定義を操作したい場合はremoveClassメソッドです。

これによって、特定の要素から[cnRemove]というクラス名が削除されるので、そちらで定義したぶんのスタイル定義が失われます。

$(".button").click(function () {
	$('.className').removeClass("cnRemove");
});

このremoveClassメソッドですが、対象となる要素が[cnRemove]というクラス名を持っていない場合、このイベント実行時には特に変化が起こらないことになります。

ただ、

「クラス名が付いている要素と、付いていない要素とがあるから、一度それらをリセットする必要がある」

という場合は、removeClassメソッドの処理を行っておく意味はあるかもしれません。

toggleClassメソッド〜特定の要素のクラス名を追加したり削除したりする〜

最後はtoggleClassメソッドです。

こちらは、処理が実行されるたびに、クラス名が付いたり、取れたりする処理を行う場合に有効です。

記述としては、こんな感じです。

$(".button").click(function () {
	$('.className').toggleClass('cnToggle');
});

これにより、ボタン的な要素をクリックorタップするたびに[cnToggle]のクラスが付いたり取れたりします。

例えば、スマートフォンのメニューボタン(ハンバーガーメニューに限らず)に使用するなどの応用ができそうです。

ページの先頭へ戻る

この記事の感想をお寄せください

[jQueryでCSSのスタイル定義を追加・変更・削除する方法【jQuery&CSS3】]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

関連記事一覧:jQueryでCSSのスタイル定義を追加・変更・削除する方法【jQuery&CSS3】

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか? 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む

ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む

ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む

皆さんは、ホームページのデザインを、どのページから始めるのが良いか、お考えになったことはありますか? もちろん、すべての場合に当てはまる正解などありません …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.