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

스타일 관련 메서드

메서드란 데이터를 참조하고 조작할 수 있는 동작을 의미합니다.
제이쿼리에 사용되는 메서드에 대해 알아보겠습니다.

1. 클래스 관련 메서드
2. 속성 관련 메서드
3. 스타일 관련 메서드

---

■ 메서드의 기본 형식

1. $("선택자").메서드명();

⇒매개변수가 없는 유형

2. $("선택자").메서드명(값);

⇒매개변수가 한개인 유형

3. $("선택자").메서드명(function(){});

⇒매개변수가 함수인 유형

4. $("선택자").메서드명(값1,값2,...);

⇒매개변수가 여러개인 유형

5. $('선택자').메서드명({
    옵션: 값,
    옵션: 값
});

⇒매개변수가 객체방식인 유형

한개의 메서드가 문법유형을 모두 갖고 있지는 않습니다.
어떤 메서드는 한개유형만, 어떤 메서드는 여러개 유형을 가질 수 있습니다.

01_ css() 메서드

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

예시

02_ width, height 관련 메서드

요소의 속성을 불린(true/false)로 제어할 수 있습니다.

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

예시

03_ 위치 관련 메서드

메서드 종류	형식
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값을 취득할 수 있습니다.

예시