.attr() 메서드는 요소(element)의 속성(attribute) 값을 가져오거나 추가, 수정이 가능합니다. 이를테면 id, class, title, href 등 부여된 값을 변수에 저장하거나, 제거, 변경이 가능합니다. 선택된 요소의 속성 값을 가져오는 방법에 대해 알아봅시다.
속성 가져오기
let $getClass;
$getClass = $( '.item' ).attr( 'class' );
>> item
이는 item이라는 class를 가진 요소의 class 속성을 가져옵니다.
let $getHref;
$getHref = $( '.item' ).attr( 'href' );
>> https://wordclip.tistory.com
위는 item이라는 class를 가진 요소의 href를 가져옵니다.
속성 추가하기
$( '.item' ).attr( 'title', '여기에 타이틀을 입력해주세요' );
위는 item이라는 class를 가진 요소에 title이라는 속성을 추가하고 값을 넣어줍니다. 여러 가지를 한 번에 추가하는 방법을 알아봅시다.
$( '.item' ).attr({
'href': 'https://wordclip.tistory.com',
'title': '워드클립 바로가기',
'target': '_blank'
});
위와 같이 한 번에 여러 속성의 제어를 필요로 할 때 도움이 됩니다.
속성 제거하기
$( '.item' ).removeAttr( 'title' );
위는 title이라는 속성을 제거합니다. 만약 속성 자체는 제거하지 않고 value만 제거하고 싶다면 다음과 같이 진행할 수 있습니다.
$( '.item' ).attr( 'title', '' );
이는 title에 부여된 value만 제거하고 title이라는 속성은 제거하지 않습니다.
속성 변경하기
속성 변경은 추가 제거에서 사용한 방식과 동일하게 value만 변경해주면됩니다.
$( '.item' ).attr( 'title', '이걸로 변경');