728x90
728x90
* 버전1.6의 업데이트로 인하여 .attr()과 .prop()으로 나누어짐
=> HTML에 쓴 속성의 값을 취급하고 싶을경우는 .attr()을 이외의 JavaScript의것을 할경우는 .prop()
차이를 알기 쉬운 예시
(1)
<html>
<body>
<a id="to_comments" href="#comments">내용</a>
</body>
<script>
var $link = $('#to_comments');
alert($link.attr('href')); // href 속성값
alert($link.prop('href')); // href 프로퍼티값
</script>
</html>// 결과
.attr() → #to_comment
.prop() → http://example.com/path/to/page#to_comment(2)
<html>
<body>
<h2>체크박스 예제</h2>
<checkbox id="private" type="checkbox" checked />
</body>
<script>
var $checkbox = $('#private');
alert($checkbox.attr('checked')); // checked 속성 값
alert($checkbox.prop('checked')); // checked 프로퍼티 값
</script>
</html>// 결과
.attr() → "checked"
.prop() → true / false
checked="checked"라는 attribute를 추가할 때
.attr('checked', 'checked'); 또는 .prop('checked', true);
checked="checked"라는 attribute를 제거할 때
.removeAttr('checked'); 또는 .prop('checked', false);
selected="selected"라는 attribute를 추가할 때
.attr('selected', 'selected'); 또는 .prop('selected', true);
checked="checked"라는 attribute를 제거할 때
.removeAttr('selected'); 또는 .prop('selected', false);
자바스크립트 .attr()과 .prop() 차이 정리
- .attr() : HTML의 속성을 취급
- .prop() : JavaScript프로퍼티를 취급
이 두 개의 메소드는 취급하는 정보가 다릅니다.
.attr()는HTML의 속성(attribute)을, .prop()는 JavaScript의 프로파티(property)를 취급하는 메소드입니다.
:: 출처 ::
http://javascriptandjquerydev.blogspot.com/2012/07/attr-prop.html
http://ginpen.com/2011/10/12/jquery-attr-prop/
728x90
728x90
'Javascript' 카테고리의 다른 글
| [공유] 자바스크립트 쿠키 저장, 조회, 삭제 (0) | 2020.02.10 |
|---|---|
| [JS] 배열 관련 메서드 push pop shift splice (0) | 2020.02.05 |
| [JS] JavaScript의 init() 이나 initialize() 는 무엇일까? (6) | 2019.12.31 |
| [JS] 자바스크립트 히스토리 객체 (window.history, browser.history) (6) | 2019.12.30 |
| [JS] 자바스크립트 함수 (2) | 2019.12.21 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
