練習2:<br>JQ之下,CSS屬性設定方式

JQ之下,CSS屬性設定方式

(一)Html結構及CSS樣式

<!--Html結構-->
<div id="note1">note1</div>
<div id="note2">note2</div>
<div id="note3">note3</div>
<button>button1</button>
<button>button2</button>
<style>
	#note1{background:#F3797B;}
</style>

(二)JQ設定

(1)取得屬性值

//取得#note1的CSS背景色彩,填入至#note2
	var note1Bg = $('#note1').css('background-color');
	alert(note1Bg);
	$('#note2').css('background', note1Bg);

(2)JQ之下,各式CSS屬性值寫入方法

//第一個按鈕
	$('button:eq(0)').click(function(){
		//方式1:設定多個CSS屬性

	
		//方式2:設定多個CSS屬性

	
		//方式2:設定多個CSS屬性

	});
//第一個按鈕
	$('button:eq(0)').click(function(){
		//方式1:設定多個CSS屬性
		$('#note1').css('font-size', '30px')
					.css('width', 400)
					.css('backgroundColor', '#BBF2FC');
	
		//方式2:設定多個CSS屬性
		$('#note2').css({
			'font-size': '30px',
			'width':400,
			'background-color': '#FFFE72'
		});
	
		//方式2:設定多個CSS屬性
		$('#note3').css({
			fontSize: '30px',
			width:400,
			backgroundColor: '#EF7CD9'
		});
	});

參考連結

(3)利用變數,重覆性使用

//第二個按鈕
$('button:eq(1)').click(function(){
	//重覆性使用	
	var note = {
		'font-size': '30px',
		'width':400,
		'background-color': '#078DCD'
		};
	$('#note1').css(note);
	$('#note2').css(note);
	$('#note3').css(note);
});