jQuery 스타일 관련 메서드

⭐️ jQuery 메서드 ⭐️

---

01. jQuery 스타일 관련 메서드

[1] css( ) 메서드

요소에 class 속성을 추가합니다.

실행 분류	형식
취득	$("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 요소의 속성을 변경 }); .... <div>내용1</div> <div>내용2</div> <div>내용3</div>

# 예제 1)

---

[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 값

# 예제 2)

---

[3] 위치 관련 메서드

메서드 종류	설명
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 값을 취득 가능

# 예제 3)