jQuery 4강 - attr() vs prop() 함수의 차이점을 비교하여 알아보자

jQuery 1.6이전에는 attr() 함수를 이용하여 모든 태그의 속성을 제어가 가능했지만 

1.6부터는 prop()라는 함수가 추가되어 attr() 함수의 역할을 나누어 주게 되었습니다.

일반적인 태그속성의 값을 변경하고자 할때는 attr()함수를 사용하고 

태그속성에 따라서 기능이 제어되는 속성에 대해서는 prop()함수를 사용합니다.

간단하게 alert창을 띄워서 각태그 값을 비교해보도록 하겠습니다.

우선 BODY 태그내에 다음 코드를 추가해봅니다.

<input type="checkbox" checked="checked" id="check_box" class="check_class" />

attr/prop 함수를 이용하여 각 속성들의 결과값을 가져와 보겠습니다.

$(function(){
	//checkbox의 아이디속성값
	var prop_id = $(":checkbox").prop("id");
	//checkbox의 클래스속성값
	var prop_class = $(":checkbox").prop("class");
	//checkbox 체크유무(true/false)
	var prop_checked = $(":checkbox").prop("checked");
	
	//checkbox의 아이디속성값
	var attr_id = $(":checkbox").attr("id");
	//checkbox의 클래스속성값
	var attr_class = $(":checkbox").attr("class");
	//checkbox의 체크 속성값(checked/undefined)
	var attr_checked = $(":checkbox").attr("checked");
	
	alert("id값 prop : " + prop_id + " , attr : " +  attr_id);
	alert("class값 prop : " + prop_class + " , attr : " +  attr_class);
	alert("checked값 prop : " + prop_checked + " , attr : " +  attr_checked);
});

실행해보도록 하겠습니다.

체크박스id속성값비교

체크박스class속성값비교

체크박스checked속성값비교

"checked" 속성을 제외한 나머지는 prop() / attr() 함수결과가 동일하게 나왓습니다.

"checked" 속성은 기능관련 속성이라 prop 함수에서는 true/false로 출력을 시켜줍니다.

이번에는 text 태그를 한번 비교해보도록 하겠습니다.

<input type="text" id="text_field" class="text_class" readonly="readonly" disabled="disabled" />

스크립트를 작성해보도록 합니다.

$(function(){
	var prop_id = $(":text").prop("id");
	var prop_class = $(":text").prop("class");
	var prop_readonly = $(":text").prop("readonly");
	var prop_disabled = $(":text").prop("disabled");
	
	var attr_id = $(":text").attr("id");
	var attr_class = $(":text").attr("class");
	var attr_readonly = $(":text").attr("readonly");
	var attr_disabled = $(":text").attr("disabled");
	
	alert("id값 prop : " + prop_id + " , attr : " +  attr_id);
	alert("class값 prop : " + prop_class + " , attr : " +  attr_class);
	alert("readonly값 prop : " + prop_readonly + " , attr : " +  attr_readonly);
	alert("disabled값 prop : " + prop_disabled + " , attr : " +  attr_disabled);	
})

작성이 되었다면 실행을 해보도록 합니다.

텍스트id속성값비교

텍스트class속성값비교

텍스트readonly속성값비교

텍스트disabled속성값비교

위처럼 속성 값을 가져올경우에는 

$("").attr("속성명") / $("").prop("속성명") 

처럼 주면 됩니다.

이번에는 속성값을 변경 해주는 것을 알아보도록 하겠습니다.

속성값 변경은 

$("").attr("속성명","적용하고자하는값") / $("").prop("속성명","적용하고자하는값")

처럼 입력값 하나를 추가해주시면 되겠습니다.

기능에 대한 속성에 대한 값은 prop 함수를 이용하여 true/false 로 적용해주시면 되겠고

일반 속성에 대한 값은  attr함수를 이용하여 값을 적용해주시면 되겠습니다.

prop() 함수를 사용하여 속성값 변경하기

체크박스의 checked 속성을 변경해보도록 하겠습니다.

body태그에 다음 코드를 작성해봅니다.

<input type="checkbox"  />

실행을 시켜보면 그냥 체크안된 체크박스하나만 덩그러니 나타날겁니다.

그럼 prop() 함수를 적용하여 체크되게 코드를 작성해보도록 하겠습니다.

$(function(){
	$(":checkbox").prop("checked",true);
})

체크박스가 체크가 되어 화면에 출력된 것을 확인 할 수 있습니다.

attr() 함수를 사용하여 속성값 변경하기

attr함수를 이용하여 class속성을 추가해보도록 하겠습니다.

class를 추가/삭제 하는 함수가 별도로 존재하지만 이 함수는 이후에 설명하도록 하겠습니다.

style태그에 클래스를 작성해주도록 합니다.

.large_checkbox {
	width: 100px;
	height: 100px;
}

다음처럼 스크립트 호출을 해보도록 합니다.

$(function(){
	$(":checkbox").attr("class","large_checkbox");
})

결과를 한번 보도록 해보겠습니다.

위처럼 체크박스의 가로세로 사이즈 변경하는 클래스가 정상적으로 적용되어 

체크박스 사이크가 커진것을 확인 할 수 있었습니다.

prop 속성만을 사용할수도 있겠지만 각 속성에 따라 지원유무에 대한 차이가 있을수 있으므로 

prop가 안되면 attr로 적용해보시면 되실거 같습니다 ^^;;

by 개발로짜