.attr() - 설정자

하나 이상의 속성값을 저장한다.

.attr(attributeName, value)

.attr(map)

.attr(attributeName, funtion)

.attr(attributeName, value)

 ◎ attributeName : 변경할 대상 속성의 이름

 ◎ value : 변경할 속성의 값

.attr(map)

 ◎ map : 속성 이름/값 형식의 맵

. attr(attributeName, function)

 ◎ attributeName : 변경할 속성의 이름

 ◎ function : 변경할 속성의 값을 반환하는 사용자 정의 함수

반환값

메서드 연쇄 호출을 지원하는 jQuery 객체

설명

.attr() 메서드로 엘리먼트의 속성값을 변경할 때 하나의 속성값을 변경하는 것은 물론이고 여러 개의 속성을 일괄적으로 변경하거나 사용자 함수에서 반환된 값을 사용할 때 매우 편리하고 강력하다.

<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />

단순 속성값 설정

엘리먼트의 alt 속성값을 변경하려면 간단하게 .attr() 메서드에 매개변수로 속성이름과 속성값을 지정하면 된다.

 

 $('#greatphoto').attr('alt', 'Beijing Brush Seller');

속성을 새로 추가하는 방법도 이와 마찬가지다.

 $('#greatphoto').attr('title', 'photo by Kelly Clark');

한 번에 여러 개의 속성값 설정하기

alt 속성과 title 속성을 동시에 변경하려면 속성의 이름과 값으로 구성된 맵(자바스크립트 객체 리터럴)을 매개변수로 사용해 변경할 수 있다. 맵은 수정할 속성의 이름/값 쌍의 조합이다.

 $('#greatphoto').attr({

    alt : 'Bejing Brush Seller',

    title : 'photo by Kelly Clark'

});

사용자 함수의 반환값으로 속성값 변경하기

특정 속성값을 다른 엘리먼트에 선언된 속성값을 이용해 변경하고 싶을 때는 사용자 함수의 반환값을 이용해 간단하게 처리할 수 있다. 예를 들어, 이미 존재하는 속성값에 문자열을 추가해 새로운 값으로 변경하는 방법은 다음과 같다.

 $('#greatphoto').attr('title', funtion(){

    return this.alt + ' - photo by Kelly Clark'

});