( 공부복습 ) 스타일, 위치 관련 메서드

▶ css( ) 메서드

실행 분류	형식
취득	$("div").css("width");
생성, 변경	$("div").css("background-color","red").css("dpadding",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>

 

---

▶  width, height 관련 메서드

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

 

---

▶  위치 관련 메서드

메서드 종류	설명
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 값을 취득 할 수 있음

 

---