jsp 파일에서, combox를 특정 조건에 따라 disabled 값을 true로 세팅해야 하는 일이 생겼다.
해당 프로젝트의 비슷한 로직을 찾던 중, 어떤 코드는 attr()을 쓰고 또 prop()을 쓰는 경우가 있어서 정리를 한다.
| 항목 | attr() | prop() |
| 사용 목적 | 일반적인 태그속성의 값을 변경할 때 사용 | 태그속성에 따라서 기능이 제어되는 속성 변경 시 사용 |
| 특징 |
HTML의 속성을 취급(HTML Element에 있는 정보) |
JavaScript의 프로퍼티를 취급 |
| 리턴 타입 |
-HTML attribute 값이 모두 String으로 넘어옴 |
-boolean, date, function 등의 데이터 타입이 그대로 넘어옴 |
| 실행 속도 | attr()에 비해 prop()이 2.5배 빠름 | |
| 사용 예시 |
1. class 변경 $(":checkbox").attr("class","large_checkbox"); |
1. checkbox 상태 변경 $(":checkbox").prop("checked",true); 2. combobox disabled 속성의 true, false 상태 변경 $('#combobox').prop('disabled', true); |
| 결론 |
attr()은 요소의 현재 html의 원래 값을 제공하므로 javascript, jquery를 통해 수정된 요소의 값을 가져와야 할 때는 prop()을 사용하는 게 좋다. |
|
'IT | 개발 > jquery' 카테고리의 다른 글
| [JavaScript | jQuery] input 태그 소문자 or 대문자로 자동 변환하기 (0) | 2021.03.08 |
|---|---|
| [jQuery | 오류 해결] jQuery is not defined 에러 해결 (0) | 2021.01.19 |