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() 함수를 사용할 수 있으며, 클래스명이 없다면 빈 배열을 반환한다.

 

 

 

 

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