-
JavaScript
- css
- jQuery
- 削除
- 変更
- 追加
jQueryを使ってCSSを変更・追加・削除する方法を解説
jQueryのCSSメソッドを使えば、CSSを操作することができます。CSSを操作することでWebページの表示状態をコード変更なしで変更します。本記事ではjQueryでHTMLのstyleを変えるCSSメソッドを解説します。
Webサイトを作っているとクリックやマウスオーバーのイベントが起きたときに文字色を変えたり、隠した文字を表示させたいことがあると思います。jQueryを使えば、イベント発生で文字色を変えたり、隠した文字を表示させることができます。
CSSを変更する操作はjQueryを使えば簡単にできます。
CSSメソッドは動的にstyleを追加、変更、削除する
CSSメソッドはHTMLのstyleを動的に追加・変更・削除するためのjQueryのコードです。CSSメソッドを使えば、ボタンをクリックすると文字色や文字サイズを変えたり、非表示の文章を表示させることが可能です。
本来であればCSSのコードを変更しなければHTMLの表示が変わることはありません。しかし、jQueryはCSSを操作するため、HTML、CSSファイルを変更することなくHTMLの表示を変えることができます。
CSSメソッドの基本構文
CSSを追加する
jQueryでCSSを変更する方法はCSSメソッドを使います。基本構文は以下の通りです。
$('セレクタ').css('プロパティ', '値');セレクタはCSSを追加したい要素のタグ名やid名、class名を記述します。CSSの括弧の中にはシングルまたはダブルクォーテーションでプロパティを書き、コンマで区切って同じくシングルまたはダブルクォーテーションで値を記述します。
例えば、h2タグの文字色を赤色にするとします。コードは以下の通りです。
$('h2').css('color', 'red');CSSを変更する
CSSが指定されている要素の値を変える方法はCSSを追加する方法と同じで、値を変えてあげます。
$('h2').css('color', 'blue');CSSを削除する
CSSを削除する場合には、削除したいプロパティを指定して、値の部分を空白で指定します。
$('div').css('color', '');「””」は空白を意味します。つまり、colorには値が入っていないので、CSSが無効になります。
onイベントと組み合わせることで、クリックやスクロールといったイベントと紐づけて発火させる事も可能です。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
div {
display: none;
}
</style>
<body>
<div>
<ul>
<li><img src="画像のリング" /></li>
<li><img src="画像のリング" /></li>
<li><img src="画像のリング" /></li>
</ul>
</div>
<button>表示</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('button').on('click', function () {
$('div').css('display', 'block');
$(this).css({ 'background-color': 'blue', color: 'red' });
});
</script>
</body>
</html>複数のCSSを追加・変更・削除する
1つの要素に対して複数のCSSを追加・変更・削除する場合の基本構文は以下の通りです。
$('セレクタ').css({
プロパティ: '値',
プロパティ: '値',
});1つだけ指定するときと2つ以上指定するときでは、記述方法が少し変わります。もし、CSSメソッドを指定した際にコードが上手く動かない場合は、真っ先に確認することをおすすめします。
複数のCSSを追加・変更・削除する時には()の中に{}を入れます。そして、プロパティと値の間はコロン(:)で区切ります。ここは1つで指定する時とは違うので気を付けてください。そして、１つ目のCSSと２つ目のCSSの間をコンマ(,)で区切ります。
CSSメソッドが使われる場面
非表示⇒表示にする
CSSメソッドが使われる場面として、ボタンやマウスオーバーで非表示にしている文章を表示させることがあります。非表示を表示にする場合は、CSSでdisplay:noneをblockにすることで可能です。コードは以下の通りです。
<button>表示</button>
<p>クリックで表示されました</p>p {
display: none;
}$('button').on('click', function () {
$('p').css('display', 'block');
});上記のコードではボタンを押すと文字が表示されます。初期の状態では文字を隠すためにdisplayをnoneにしておきます。そして、ボタンを押されたときの処理をjQueryで書きます。displayにblockを指定することで、非表示が表示されます。
マウスオーバーで強調される
もう一つCSSメソッドを使う例として、マウスオーバーで文字を強調することです。ここではh2タグの部分にマウスが乗ったら、pタグの文字を大きくして、色を赤色にするコードを紹介します。
<h2>マウスを乗せてください</h2>
<p>見出しにマウスが乗ると文字が強調されます。</p>$('h2').hover(
function () {
$('p').css({ 'font-size': '120%', color: 'red' });
},
function () {
$('p').css({ 'font-size': '', color: '' });
}
);jQueryでclassを追加・変更・削除する方法
classを追加する
CSSを追加する方法として、あらかじめCSSを書いておいたclassを用意しておいて、CSSをつけたいタグにclassを追加する方法があります。その際に使うのがaddClassメソッドです。
基本構文は以下の通りです。
$('セレクタ').addClass('クラス名');下にサンプルコードを用意しています。ボタンをクリックするとテキストの色と文字サイズが変わるようになっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.change-text {
color: red;
font-size: 32px;
}
</style>
<body>
<div>
<p>ここが変わります。</p>
</div>
<button>変化</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('button').on('click', function () {
$('p').addClass('change-text');
});
</script>
</body>
</html>classを削除する
classを削除する場合はremoveClassメソッドを使用します。
基本構文は以下の通りです。
$('セレクタ').removeClass('クラス名');
$('セレクタ').removeClass('クラス名');removeClassメソッドでclass名を削除することで、CSSを削除します。削除したいCSSがあるセレクタに必ずclass名を付けなければいけませんが、コードが短くて済みます。
CSSメソッドを使うメリット
CSSメソッドを使うメリットとしてはCSSのプロパティに対してコードを書き換えることができることです。addClassやremoveClassはCSSファイルにあらかじめ用意しておいたコードをHTMLのクラスを操作することで有効にします。
一方で、CSSメソッドを使えば、同じクラスの中の指定したプロパティにのみ操作をすることが可能です。CSSメソッドは引数のプロパティのみを変えますので、他のプロパティには影響を与えません。
例えば、background-colorは変えたいけれどcolorを変えたくないという場合にはcss(“background-color”,”skyblue”)のように記述すればcolorを変えることなく、background-colorを変えることができます。
まとめ
jQueryでCSSを変更・追加・削除する方法を解説しました。CSSをページ内で動かすことができれば、デザインの幅が広がり、より見やすいサイトとなります。見やすいサイトほど、ユーザーの滞在時間が長くなります。
CSSメソッドでは一方向の一回限りです。しかし、表示、非表示の切り替えは頻繁に使われます。複数回の切り替えを行う場合はtoggleというメソッドを使います。CSSメソッドと同時に覚えておくことがおすすめです。
toggleメソッドは下記のページでも解説しているので、参考にしてください。
