본문 바로가기

jQuery

03-2.엘리먼트 스타일 변경

 엘리먼트 스타일 변경

 

[ 클래스 추가 / 제거 ]

addClass(names) - 매개변수로 전달된 하나 이상 되는 클래스명을 확장 집합의 모든 엘리먼트에 추가.
- names : (String) 클래스명을 포함하는 문자열. 여러 클래스명을 추가할 때는 공백으로 구분.

 

removeClass(names) - 매개변수로 전달된 하나 이상되는 클래스명을 확장 집합에 있는 모든 엘리먼트에서 제거.
- names : (String) 다수의 클래스명을 제거하는 경우 공백으로 구분.

 

toggleClass(name) - 매개변수로 전달된 클래스명이 엘리먼트에 존재하지 않으면 추가하고, 존재한다면 제거한다.


[ 스타일 얻고 설정하기 ]

css(name, value) - 일치하는 각 엘리먼트에 name 매게변수의 CSS 스타일 프로퍼티를 value 매개변수 값으로 설정.
- name : (String) CSS 프로퍼티 이름
- value : (String|Number|Function) 프로퍼티 값을 포함하는 문자열, 숫자, 함수, 매개변수로 함수가 전달.


예제)

  1. $("div.expandable").css("width", function() {
     return $(this).width() + 20 + "px";
    });

설명) 확장 집합에 있는 모든 엘리먼트의 폭을 20픽셀(pixel)씩 확장


css(properties) - 매개변수로 전달된 객체에 키로 명시한 CSS 스타일 프로퍼티를 일치하는 엘리먼트의 해당 값으로 설정.
- properties : (Object) 확장 집합에 속한 모든 엘리먼트에 설정할 CSS 프로퍼티를 포함한 객체.


css(name) - 확장 집합의 첫 번째 엘리먼트에서 name으로 명시한 CSS 프로퍼티의 계산 값을 가져온다.
- name : (String) 반환될 CSS 프로퍼티 이름을 명시


width(value) - 일치하는 집합에 속한 모든 엘리먼트의 너비를 설정
height(value) - 일치하는 집합에 속한 모든 엘리먼트의 높이를 설정
- value : 설정된 픽셀 값

 

예제1)

  1. $("div.myElements").width(500)

설명1) 해당 엘리먼트의 너비를 500픽셀로 설정

 

예제2)

  1. $("div.myElements").css("width", "500px")

설명2) 예제1과 같은 동작을 하는 코드


width() - 확장 집합의 첫 번째 엘리먼트의 너비를 가져온다.
height() - 확장 집합의 첫 번째 엘리먼트의 높이를 가져온다.1
- 반환값 : 계산된 너비나 높이의 숫자 값


hasClass(name) - 일치하는 집합의 엘리먼트에 전달된 클래스 이름이 있는지 확인.
- name : (String) 확인하려는 클래스 이름
- 반환값 : 클래스 이름을 가지면 true, 그렇지 않으면 false 반환

 

예제1)

  1. $("p:first").hasClass("surpriseMe")

설명1) 엘리먼트에 "surpriseMe" 클래스를 가지고 있으면 true를, 그렇지 않으면 false를 반환


예제2)

  1. $("p:first").is(".surpriseMe")

설명2) 예제1과 같은 코드이다. is() 커멘드를 사용하여 hasClass() 커멘드를 구현하지만 hasClass() 커맨드를 쓰면 훨씬 읽기 좋은 코드가 된다.


예제3)

  1. $("p:first").attr("class").split(" ");

설명3) 특정 엘리먼트에 정의된 클래스 목록을 공백으로 구분된 문자열 대신에 배열로 얻는다.


예제4)

  1. $.fn.getClassNames = function() {
     if (name = this.attr("className")) {
      return name.split(" ");
     }
     else {
      return [];
     }
    };

설명4) attr() 커맨드는 명시한 어트리뷰트가 존재하지 않으면 undefined를 반환하므로 엘리먼트가 클래스명을 지니지 않으면 에러가 발생한다. 이를 해결하려면 먼저 어트리뷰트를 확인하는 작업을 해야 한다. 이제 클래스명을 얻으려면 스크립트 어디에서나 getClassNames() 함수를 사용할 수 있으며, 클래스명이 없다면 빈 배열을 반환한다.

 

 

 

 

이 글은 스프링노트에서 작성되었습니다.

'jQuery' 카테고리의 다른 글

04-1.브라우저 이벤트 모델  (0) 2010.02.13
03-3.엘리먼트 콘텐츠 설정  (0) 2010.01.23
03-1.엘리먼트 프로퍼티와 어트리뷰트 조작  (0) 2010.01.16
엘리먼트 집합 생성하기  (0) 2010.01.12
jQuery 기초  (0) 2009.08.15