[jQuery] attr()과 prop()의 차이점

1. 이슈

jquery를 사용하면서 속성을 변경하는 방법에는 attr()과 prop()가 있다.

그러나 상황에 따라 작동되는 방식이 다르다.

자주 사용하는 이 둘의 차이점을 알아보려고 한다.

 

2. attr()과 prop()의 차이점

<input type="radio" name="yn" id="yn_1" value="Y" checked="checked" />있음
<input type="radio" name="yn" id="yn_2" value="N" />없음

$('#yn_1').attr("checked"); // attr로 checked상태인지 물어봄
$('#yn_1').prop("checked"); // prop로 checked상태인지 물어봄

$('#yn_2').attr("checked"); // attr로 checked상태인지 물어봄
$('#yn_2').prop("checked"); // prop로 checked상태인지 물어봄

해당 결과는 이렇다.

$('#yn_1').attr("checked");
-> checked

//checked라는 속성이 있어서 checked라는 값을 가져온다

$('#yn_2').attr("checked");
-> undefined

//아무 속성도 부여하지 않았기 때문에 undefined라는 값을 가져온다

$('#yn_1').prop("checked"); 
-> true

//checked 속성이 있어 true를 반환한다

$('#yn_2').prop("checked");
-> false

//checked 속성이 없어 false를 반환한다

정리하자면

. attr()는 element가 가지는 속성값이나 정보 값을 있는 그대로 가져오고 (checked, selected 처럼)

. prop()는 element가 가지는 실제적인 상태 값을 가져온다. (true, false 처럼)

 

3. 사용법

attr()과 prop()로 상태값을 조작할 때는 true, false로 설정해주면 된다.

attr는 직접적으로 check처럼 문자열을 설정해 줄 수도 있다. (좋은 방법은 아님)

다만 jQuery API에서 공식적으로 form 요소의 disabled, selected, checked와 같은 속성값을 확인 또는 변경하는 경우는

property 값을 설정하고 읽는 데에 최적화되어 있는. prop()을 사용하길 권장한다.

$('#yn_2').prop('readonly', true); // readonly 설정

$('#yn_2').attr('checked' , 'check'); // checked 설정

$("#yn_2").attr("readonly", true) // readonly 설정

 

참고

https://jin-network.tistory.com/105

[jQuery] attr()과 prop()의 차이

잘못된 내용이 있다면 지적부탁드립니다. 방문해주셔서 감사합니다.