제이쿼리 : 스타일 관련 메서드

제이쿼리 : 스타일 관련 메서드

오늘은 JQuery의 주요 메서드들 중, 스타일과 관련된 메서드를 알아보도록 하겠습니다.

---

1. css() 메서드

실행 분류	형식
취득	$("div").css("width");
생성, 변경	$("div").css("background-color", "red").css("padding", "10px");
	$("div").css({"background-color: "red", padding: "10px"});
콜백 함수	$("div").attr("width", function(index, w) {     // index는 각 div 요소의 index 0, 1, 2     // w는 각 div 요소의 width 값     return css 속성 // 각 div 요소의 css 속성을 생성 및 변경합니다. }); .... <div>내용</div> <div>내용</div> <div>내용</div>

다음은 css() 메서드의 사용 예제입니다.

2. 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값

다음은 width, height 관련 메서드의 사용 예제입니다.

3. 위치 관련 메서드

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

다음은 위치 관련 메서드의 사용 예제입니다.