jquery：css()

このプログラムは下記から構成されています。

<div class='sumple01' style='display:flex;'>
	<div class='box01' style='color:red;background-color:yellow;width:60px; height:60px;'>1</div>
	<div class='box02' style='color:white;background-color:blue;width:60px; height:60px;'>2</div>
</div>
<div class='color01' style='color:red'></div>
<button type='button' class='reset' style='margin-top:10px;'>リセット</button>
<script>
	$(function(){
		$('.box01,.box02').click(function(){
			var rgb_color = $(this).css('background-color');
			var hex_color = rgb_hex(rgb_color);
			$('.color01').html('背景色(RGB)：' + rgb_color + '<br>背景色(hex)：' + hex_color);
		});
		$('.reset').click(function(){
			$('.color01').html('');
		});			
	});
</script>

■10行目

css( 'background-color' )で背景色を取得します。

返されるカラーコードは、RGB形式になります。

■11行目

rgb_hex()は、取得したRGBコードをHEXコードに変換するユーザ関数です。

作成方法は[javascriptで記述されたユーザ関数]を参照してください.

このプログラムは下記から構成されています。

<div class='sumple' style='display:flex;'>
	<div class='box03' style='color:red;background-color:yellow;width:60px; height:60px;'>1</div>
	<div class='box04' style='color:white;background-color:blue;width:60px; height:60px;'>2</div>
</div>
<button type='button' class='reset02' style='margin-top:10px;'>リセット</button>
<script>
	$(function(){
		$('.box03,.box04').click(function(){
			$(this).css('background-color','darkviolet');
		});
		$('.reset02').click(function(){
			$('.box03').css('background-color','yellow');
			$('.box04').css('background-color','blue');
		});			
	});
</script>

■9行目

css('background-color','darkviolet')で背景色を変更しています。

'darkviolet' でなく、'#9400d3' 又は 'rgb(148,0,211)' で指定しても結果は同じです。

■12行目、13行目

リセットは元の背景色を書き込んでいます。

このプログラムは下記から構成されています。

<div class='sumple' style='display:flex;'>
	<div class='box05' style='color:red;background-color:yellow;width:60px; height:60px;'>1</div>
	<div class='box06' style='color:white;background-color:blue;width:60px; height:60px;'>2</div>
</div>
<div class='color03' style='color:red'></div>
<button type='button' class='reset' style='margin-top:10px;'>リセット</button>
<script>
	$(function(){
		$('.box05,.box06').click(function(){
			var color_array = $(this).css(['background-color','color']); // CSSのデータを連想配列に取得
			var rgb_background = color_array['background-color'];// 連想配列から背景色を取得
			var rgb_color      = color_array['color'];                    // 連想配列から文字色を取得
			var hex_background = rgb_hex(rgb_background);        // 背景色をHEXコードに変更
			var hex_color      = rgb_hex(rgb_color);                    // 文字色をHEXコードに変更
			$('.color03').html('RGB 背景色：' + rgb_background + '　文字色：' + rgb_color +'<br>HEX 背景色：' + hex_background + '　文字色:' + hex_color);
		});
		$('.reset').click(function(){
			$('.color03').html('');
		});			
	});
</script>

■11行目

css(['background-color','color'])で背景色と文字色を連想配列に取得しています。

■12～13行目

連想配列から背景色と文字色を取り出しています。

■14～15行目

背景色と文字色をHEXコードの変換しています。

rgb_hex()はRGBコードをHEXコードに変換するユーザ関数です。

作成方法は[javascriptで記述されたユーザ関数]を参照してください.

このプログラムは下記から構成されています。

<div class='sumple' style='display:flex;'>
	<div class='box07' style='color:red;background-color:yellow;width:60px; height:60px;'>1</div>
	<div class='box08' style='color:white;background-color:blue;width:60px; height:60px;'>2</div>
</div>
<button type='button' class='reset' style='margin-top:10px;'>リセット</button>
<script>
	$(function(){
		$('.box07,.box08').click(function(){
			$(this).css( {'color':'white' , 'background-color':'black' });
		});
		$('.reset').click(function(){
			$('.box07').css( {'color':'red' , 'background-color':'yellow' });
			$('.box08').css( {'color':'white' , 'background-color':'blue' });
		});			
	});
</script>

■9行目

ここでクリックされたBOXの背景色と文字色を変更しています。

■リセット

12行目、13行目で元の背景色と文字色に戻しています。