jQuery 알아보기 : 스타일 관련 메서드

jQuery 스타일 관련 메서드 알아보기

제이쿼리의 메서드 중에서 스타일과 관련된 메서드들을 알아봅니다.
스타일 관련 메서드에는 css() 메서드가 있으며, width/height 관련 메서드와 위치 관련 메서드도 알아보겠습니다.

> css() 메서드

css() 메서드는 요소의 css 속성을 취득, 생성, 변경할 수 있습니다.

실행 분류	형식	예시	예제
취득	$("요소").css("css 속성");	$("div").css("width");	보러 가기
생성	$("요소").css("css 속성", "값");	$("div").css("color", "white").css("padding", "10px");
변경	$("요소").css({기존 css 속성: "값", 바꿀 css 속성: "값"});	$("div").css({color: "white", padding: "10px"});
콜백 함수	$("요소").css("css 속성", function(index, cssV) {     return "속성 값";     ⇒ 각 '요소'의 css 속성을 변경합니다. }); ⇒ index는 각 '요소'의 index 0, 1, 2 ⇒ cssV 각 '요소'의 css 속성 값	$("div").css("width", function(index, w) { return 100; }); //… <div>내용1</div> <div>내용2</div> <div>내용3</div>

> width, height 메서드

css의 width와 height에 관련된 메서드를 알아봅니다.

메서드 종류	설명	예제
width()	요소의 가로 길이를 취득, 변경할 수 있습니다.	보러 가기
innerWidth()	padding이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다.
outerWidth()	border와 margin이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다. outerWidth()는 요소의 width값 + 좌/우의 border값 outerWidth(true)는 요소의 width값 + 좌/우의 border값 + 좌/우의 margin값
height()	요소의 높이를 취득, 변경할 수 있습니다.
innerheight()	padding이 적용된 요소의 높이를 취득, 변경할 수 있습니다.
outerHeight()	border와 margin이 적용된 요소의 높이를 취득, 변경할 수 있습니다. outerHeight()는 요소의 height값 + 상/하의 border값 outerHeight(true)는 요소의 height값 + 상/하의 border값 + 상/하의 margin값

> 위치 관련 메서드

요소의 위치와 관련된 메서드를 알아봅니다.

메서드 종류	예시	설명	예제
offset()	$("요소").offset().left	html 기준으로 left 값을 취득할 수 있습니다.	보러 가기
	$("요소").offset().top	html 기준으로 top 값을 취득할 수 있습니다.
	$("요소").offset({left: 10, top: 10})	html 기준으로 left, top 값을 변경할 수 있습니다.
position()	$("요소").position().left	부모 요소 기준으로 left 값을 취득할 수 있습니다.
	$("요소").position().top	부모 요소 기준으로 top 값을 취득할 수 있습니다.