attr과 prop의 차이 적어두기! :: 개발/일상_Mr.lee

attr과 prop의 차이 적어두기!

Posted by Mr.mandu.
2017. 8. 10. 10:53 개발/javascript,jquery

코딩을 하면서 

attr을 많이 쓰게 된다...

하지만 attr로 사용 할때 자주 부딪히는 문제? 버그 성격? 이라고 생각되는게

체크박스나 라디오 버튼 체크여부를 판단하거나 제어할때 발생한다

그래서 정리해 적어두려고 한다.


attr()

 - HTML 속성(attribute) 취급, HTML Element에 있는 정보

 - HTML attribute 값이 String으로 넘어옴


prop()

 - JavaScript의 프로퍼티(property) 취급, JavaScript에서 사용하는 정보

 - boolean, date, function 등을 가져올 수 있음


ex)

체크박스가 체크되어있는 상황

alert($("#s_cc_kr").attr('checked'))   ----- return  : checked

alert($("#s_cc_kr").prop('checked')) ----- return  : true 



체크박스가 체크되어있지 않은 상황

alert($("#s_cc_kr").attr('checked'))   ----- return  : checked

alert($("#s_cc_kr").prop('checked')) ----- return  : false


input checkbox에 checked="true" 이와같은 속성이 없을시

alert($("#s_cc_kr").attr('checked'))   ----- return  : undefined

alert($("#s_cc_kr").prop('checked')) ----- return  : false