jQuery 입문 | CSS 스타일 및 프로퍼티 설정 | 프로퍼티 설정 .attr() .prop()

프로퍼티 설정

다음 메소드를 사용하면 특정 프로퍼티의 값을 받아오나 설정할 수 있다.

.attr()와 .removeAttr() 메소드

.attr() 메소드는 선택한 요소에 지정된 속성(attribute)값을 반환하거나, 선택한 요소의 지정된 속성을 전달받은 값으로 설정한다.

.removeAttr() 메소드는 선택한 요소의 속성(attribute)값을 제거한다.

아래 예제는 .attr() 메소드를 이용하여 속성값을 설정 및 반환을 하고, .removeAttr() 메소드를 이용하여 제거한다.

$("#btnSetter").on("click", function() {
  $("span").attr("title", (++count) + "번 클릭했습니다.");  // 속성값 설정
});
$("#btnGetter").on("click", function() {
  $("p").text($("span").attr("title"));  // 속성값 반환
});
$("#btnRemove").on("click", function() {
  $("span").removeAttr("title"); // 속성 제거
});

코드 실행

.prop()와 .removeProp() 메소드

.prop() 메소드는 jQuery 1.6부터 새롭게 정의된 메소드이다. 이 메소드는 선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property)값을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정한다.

.removeProp() 메소드는

$("#btnSetter").on("click", function() {
  $('input[type="checkbox"]').prop({checked: true}); // 프로퍼티 설정
});
$("#btnGetter").on("click", function() {
  $("p").text($('input[type="checkbox"]').prop("checked")); // 프로퍼티 반환
});
$("#btnRemove").on("click", function() {
  $('input[type="checkbox"]').removeProp("checked"); // 프로퍼티 제거
});

코드 실행

속성(attribute)과 프로퍼티(property)의 차이점

.attr() 메소드와 .prop() 메소드의 차이점을 알기 위해서는 우선 속성(attribute)과 프로퍼티(property)의 차이점을 알아야 한다.

속성(attribute)

속성(attribute)이란 HTML 요소의 추가적인 정보를 가지고 있는 이름과 값의 한 쌍을 의미한다.

위에 <input>요소는 checked라는 속성(attribute)을 가지고 있으며, 그 속성값은 “checked"이다.

<input type="checkbox" name="chk" checked="checked">

프로퍼티(property)

프로퍼티(property)란 위와 같은 속성을 객체화하였을 때의 HTML DOM 트리 내부에서의 값을 가리킨다.

아래 예제에서 만약 해당 체크박스가 체크되면 checked 프로퍼티 값은 “true"이다.

<input type="checkbox" name="chk" checked="checked">

즉, 속성은 HTML 문서에 존재하고 값이 변하지 않으며, 프로퍼티는 HTML DOM 트리에 존재하고 그 값이 변할 수 있다.

예를 들어, 사용자가 HTML 문서에 있는 <input>요소를 체크하거나 자바스크립트를 이용해 값을 변경하면, 속성값은 변하지 않지만 프로퍼티의 값은 변하게 되는 것이다.

.attr() 메소드와 .prop() 메소드와의 차이점

jQuery 1.6 이전에는 .attr() 메소드를 사용할 때 부정확한 동작을 일으키는 몇몇 속성에 대해 해당 프로퍼티 값까지 고려해서 코드를 작성해야만 했다.
jQuery 1.6 이후부터 .attr() 메소드는 속성만을 다루게 하고, 새롭게 제공되는 .prop() 메소드를 이용하여 프로퍼티 값을 다루는 방법으로 위와 같은 문제점을 해결했다.

아래 예제는 체크박스가 변경될때 마다 속성 및 프로퍼티 값이 어떻게 변경하는지 알 수 있는 예제이다.

$('input[type="checkbox"]').change(function() {
  var html = "checked 속성값: " + $(this).attr("checked") +"<br>";
  html += "checked 프로퍼티값: " + $(this).prop("checked");
  $("p").html(html);
}).change();

코드 실행

참고

• http://api.jquery.com/attr/
• http://api.jquery.com/removeattr/
• http://api.jquery.com/prop/
• http://api.jquery.com/removeprop/