본문 바로가기
JavaScript/Jquery

jQuery : CSS() 메서드

by SyuMay 2022. 9. 5.
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

댓글


자바스크립트 사진

JavaScript

자세히보기