[JQ] 배열을 이용하여 속성 바꾸기

참고자료 .css()

.css() | jQuery API Documentation

var colorArr = ['red', 'orange', 'yellow'];
$('h2').css('color', function(index, value) {
// 			alert(index+"/"+value);
	// 0 1 2 / rgb(0,0,255)
	return colorArr[index];
});

index : 0 1 2

value: rgb(0,0,255)

 

각 요소별 각각에 다른 속성을 적용

$('h2').css('color', function(idx) {
	alert(idx); // 위치에 따른 의미를 가진다.
// 0 1 2
	return colorArr[idx];
});

태그 하나에 스타일 하나만 걸지 않으니..

h2 태그의 배경색 요소

$('h2').css('background', 'black');
$('h2').css('background', 'rgb(0,0,0)');
$('h2').css('background', '#000');

배경색을 검정색으로 하고 싶으면 셋 중 하나 쓰면됨!

 

하나의 요소에 여러개의 속성을 적용

글자색, 배경색 변경

$('h2').css({
	color:'red',
	background: '#ffd3e3'
});

$('h2').css({
	color: function(idx, value) {
	return colorArr[idx];
	},
	background: '#ffd3e3'
});

이 상태에서

<h2>head-3</h2> 추가하면 페이지가 출력됐을 때 blue색상으로 보임.

배열에서는 다음 idx가 없기 때문에 이전에 설정했던 blue가 보임