[JQUERY] 스타일 메서드

Jquery : 스타일 관련 메서드

이번 시간에는 css 속성을 추가할 수 있는 jquery 스타일 관련 메서드에 대해 알아보겠습니다.🧐

---

#1. jquery : 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>내용1</div> <div>내용2</div> <div>내용3</div>

✏️ css() 메서드 예제

---

#2. jQuery : 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. jQuery : 위치 관련 메서드

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

✏️ 위치 메서드 예제

---

꾸물꾸물 하다보니 이런 시간에 포스팅을 하게 되었네요.... 다음엔 꼭 일찍 올릴 수 있기를~~