문서 객체의 스타일

문서 객체의 스타일

문서 객체의 스타일 검사

css()

: 스타일과 관련된 모든 기능을 수행합니다.

css() 메서드로 특정 문서 객체의 스타일 속성을 알고 싶을 때 -> 메서드의 매개변수에 스타일 속성 이름을 입력한다.

$(document).ready(function() {
	// 변수를 선언합니다.
	var color = $('h1').css('color');
	
	// 출력합니다.
	alert(color); // rgb(255, 0, 0) 같은 값이 나온다.
});

문서 객체의 스타일 추가

세가지 형태

1. $(selector).css(name, value);

2. $(selector).css(name, function(index, style){});

3. $(selector).css(object);

1번 예시)

$(document).ready(function() {
	$('h1').css('color', 'red');
});

2번 예시)

$(document).ready(function() {
	// 변수를 선언합니다.
	var color = ['red', 'white', 'purple'];

	// 문서 객체의 스타일을 변경합니다.
	$('h1').css('color', function(index) {
		return color[index];
	});
});

3번 예시)

$(document).ready(function() {
	// 변수를 선언합니다.
	var color = ['red', 'white', 'purple'];

	// 문서 객체의 스타일을 변경합니다.
	$('h1').css({
		color: function(index){
			return color[index];
		},
		backgroundColor: 'black'
	});
});