jQuery - 스타일 메서드

jQuery 스타일 관련 메서드

스타일을 제어할 수 있는 메서드들을 소개해드리겠습니다. 우리가 css로 설정하는 속성들 말입니다.

---

css() 메서드

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

결과

See the Pen jQuerystyle01 by kim-0617 (@kim-0617) on CodePen.

---

반응형

width, height 관련 메서드

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

결과

See the Pen Untitled by kim-0617 (@kim-0617) on CodePen.

---

위치 관련 메서드

메서드 종류	설명
offset()	$("div").offset().left $("div").offset().top $("div").offset({left:10, top:10})
position()	$("div").position().left $("div").position().top

결과

See the Pen Untitled by kim-0617 (@kim-0617) on CodePen.