Jquery의 CSS 관련 함수 [Jquery, CSS]

공부/Jquery,CSS  2016.03.28 00:26

안녕하세요. 명월입니다.
이번 포스트에서는 Jqeury 중에서 CSS 스타일과 관계된 함수를 공부하겠습니다.


CSS 관련 함수는 말 그대로 Jquery 내에서 CSS의 값을 취득하거나 설정하는 함수입니다. CSS를 설정하는 함수가 있고, 높이, 위치를 구하는 함수가 있습니다.
그 외의 CSS 재정의하는 함수가 있습니다.


참고 - Jquery Api Document


함수 설명
.addClass() class속성에서 클래스를 추가합니다.
.hasClass() class속성에서 클래스가 있는지 확인한다.
.removeClass() class속성에서 클래스를 제거한다.
.toggleClass() class속성에서 클래스가 있으면 추가, 없으면 제거한다.
.height() 요소의 높이를 구하거나 설정합니다.
.width() 요소의 폭을 구하거나 설정합니다.
.innerHeight() 요소의 padding 포함 높이 값을 구하거나 설정합니다.
.innerWidth() 요소의 padding 포함 폭 값을 구하거나 설정합니다.
.outerHeight() 요소의 padding, border 포함 높이 값을 구하거나 설정합니다.
.outerWidth() 요소의 padding border 포함 폭 값을 구하거나 설정합니다.
.offset() 요소의 절대 좌푯값을 구하거나 설정합니다.
.position() 부모 요소의 기준으로 좌푯값을 구하거나 설정합니다.
.scrollLeft() 가로 스크롤의 위치 값을 구하거나 설정합니다.
.scrollTop() 세로 스크롤의 위치 값을 구하거나 설정합니다.
.css() 요소의 스타일 속성값을 구하거나 설정합니다.
jQuery.cssHooks 요소 스타일의 재정의를 설정한다.
jQuery.cssNumber 단위없이 사용할 수 있는 모든 CSS 속성을 포함하는 객체입니다.

위 함수를 확인하면 Class 관련 함수는 이전 포스트에서 한 Attribute 함수 포스트에서 공부한 부분이니 생략을 하겠습니다.


링크 - [Jquery, CSS] Attributes 함수 (어트리뷰트 함수)







위 예제를 살펴보면 마지막에 outputExam() 함수가 실행되기 때문에 구하기 버튼을 누른결과가 화면에 나옵니다. 그럼 먼저 테스트가 cssHooksTest 버튼을 누르면 색이 바뀌는 것을 확인할 수 있습니다.
CSS에는 reset이라는 스타일을 추가했는데 실제는 reset이라는 스타일은 없습니다. 밑에 cssHooks로 재정의를 해서 파라미터가 하나는 get을 두 개는 set을 호출합니다.


그리고 테스트는 왼쪽, 오른쪽 스크롤이 이동하면 현재 스크롤의 좌표가 나오는 scrollTop, scrollLeft의 결과가 화면에 나옵니다.
다시 구하기 버튼을 누르면 초기의 width, height, position, offset의 값이 나옵니다.



댓글 0개가 달렸습니다.
댓글쓰기