728x90
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) { //indexs는 각 div 요소의 index0,1,2 //w는 각 div 요소의 width 값 return css 속성// 각 div 요소의 css 속성을 변경합니다. }); .... <div>내용</div> <div>내용</div> <div>내용</div> |
예시
width, height관련 메서드
넓이와 높이를 설정할 수 있는 메서드입니다.
메서드 종류 | 설명 |
---|---|
width() | innerWidth() |
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 값 |
예시
position관련 메서드
위치 관련 메서드로 위치를 컨트롤 할 수 있습니다.
메서드 종류 | 형식 | 설명 |
---|---|---|
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 값을 취득할 수 있습니다. |
예시
728x90
반응형
'JavaScript > Jquery' 카테고리의 다른 글
jQuery : 속성 관련 메서드 (5) | 2022.09.05 |
---|---|
jQuery : class관련 메서드 (2) | 2022.09.05 |
jQuery - 탐색 선택자 (5) | 2022.09.01 |
jQuery - 필터 선택자 (4) | 2022.09.01 |
jQuery - 속성 선택자 (3) | 2022.09.01 |
댓글