【jQuery】要素の背景色を変更する方法を完全網羅！サンプルコード付き
jQueryで要素の背景色を変更する方法
css()メソッドを使用する
基本的な書き方
$(selector).css('background-color', 'color');
例：要素の背景色を青色に変更
$('#target_element').css('background-color', 'blue');
$('.target_class').css('background-color', 'red');
CSSプロパティを複数指定
$(selector).css({
'background-color': 'green',
'font-weight': 'bold'
});
addClass()メソッドとremoveClass()メソッドを使用する
既存のCSSクラスを利用する場合
CSSで定義済みのクラスを使用
.blue_background {
background-color: blue;
}
jQueryでクラスを追加
$(selector).addClass('blue_background');
クラスを削除
$(selector).removeClass('blue_background');
動的にスタイルを変更する場合
変数に色を格納
var newBackgroundColor = 'yellow';
jQueryでスタイルを動的に設定
$(selector).css('background-color', newBackgroundColor);
補足
- 変更する要素を適切にセレクタで選択する必要があります。
- カラーコードは、16進数表記(#fff) 、RGB表記(rgb(255, 255, 255))、名前(red) のいずれでも使用できます。
- 複数のスタイルプロパティを同時に変更したい場合は、
css()メソッドのオブジェクト形式を使用すると便利です。 - すでに存在するCSSクラスをを利用する場合は、
addClass()とremoveClass()メソッドが便利です。 - 動的にスタイルを変更したい場合は、変数に色を格納して、
css()メソッドに渡すことができます。
jQueryで要素の背景色を変更する：サンプルコード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryで背景色を変更</title>
<style>
.original {
background-color: gray;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="original" id="target_element">要素の背景色を変更します</div>
<button id="change_color_button">背景色を変更</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#change_color_button').click(function(){
$('#target_element').css('background-color', 'red');
});
});
</script>
</body>
</html>
説明
- HTML
target_elementというIDを持つ要素を用意します。この要素の背景色を変更します。change_color_buttonというIDを持つボタンを用意します。このボタンをクリックすると、要素の背景色が変更されます。
- JavaScript
$(document).ready(function(){}): DOMコンテンツが読み込まれた時点で実行されるコードを記述します。$('#change_color_button').click(function(){}):change_color_buttonがクリックされたときに実行される関数を定義します。$('#target_element').css('background-color', 'red');:target_elementの背景色を赤に変更します。
実行結果
上記のコードを実行すると、グレー色のボタンと要素が表示されます。ボタンをクリックすると、要素の背景色が赤色に変更されます。
応用例
- ボタンクリックで要素の色をランダムに変更する
- ページの読み込み時にランダムな背景色を設定する
- マウスオーバーで要素の背景色をハイライトする
このサンプルコードを参考に、様々な状況でjQueryを使って要素の背景色を変更することができます。
jQueryで要素の背景色を変更する：その他の方法
アニメーション効果
$('#target_element').animate({
backgroundColor: 'red'
}, 500);
例：要素の背景色を500ミリ秒かけて赤色に変更
このコードは、target_elementの背景色を500ミリ秒かけて赤色に変更します。アニメーション効果により、滑らかに色が変化します。
toggleClass()メソッドを使用する
.red_background {
background-color: red;
}
.blue_background {
background-color: blue;
}
$(selector).toggleClass('red_background blue_background');
例：要素の背景色を赤色と青色を切り替える
このコードは、selectorの要素の背景色を、現在設定されている色とred_backgroundとblue_backgroundのいずれか противоположным に切り替えます。要素の背景色が赤色の場合は青色になり、青色の場合は赤色になります。
fadeIn()とfadeOut()メソッドを使用する
フェードイン・フェードアウト
$('#target_element').fadeIn('slow');
$('#target_element').fadeOut('slow');
例：要素をフェードインさせてからフェードアウト
このコードは、target_elementをゆっくりとフェードインさせ、その後ゆっくりとフェードアウトします。このテクニックを使用して、要素の背景色を変化させることもできます。
マウスホバー時のスタイル変更
$('#target_element').hover(function(){
$(this).css('background-color', 'red');
}, function(){
$(this).css('background-color', 'gray');
});
例：要素にマウスホバーすると背景色が赤色になり、マウスアウトすると元の色に戻る
このコードは、target_elementにマウスホバーすると背景色が赤色になり、マウスアウトすると元の色（グレー）に戻ります。
jQueryには、要素の背景色を変更する様々な方法があります。今回紹介した方法はほんの一例です。状況に合わせて適切な方法を選択してください。
jquery
