[jQuery] attr 메소드로 속성(attribute) 값을 가져오거나 수정, 추가 제거 하는 방법

.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', '이걸로 변경');