이민재의 개발일지

jQuery 에서 Attr() 은 속성 값을 가져오거나 제어할 수 있는 함수인데
JS를 기반으로 하고 있는 특성상 객체의 활용도 가능합니다.

attr() 메서드의 기본 형태는 다음과 같습니다.

// 함수의 기본 형태

.attr( '속성 이름' )
.attr( '속성 이름', '속성 값(value)' )

let src = $('img').attr('src');
// 위와 같이 img 태그에 있는 src에 들어 있는 값을 변수를 만들어 저장할수도 있다.

이렇게 변수에 저장하는 것 외에도 직접적으로 html, css에 관여할 수 있는데

$('img').attr('width','300');
// 이미지 태그의 width 속성의 값을 300으로 한다.

위와 같이 바로 속성의 값을 제어할 수도 있습니다.

여기에서 각 항목에 익명함수를 이용해 그것의 리턴값을 넣어줄수도 있고,

attr 안에 객체를 넣어서 다중속성 제어를 할 수도 있습니다. 그 예시는 다음과 같습니다.

$(function(){
	$('img').attr(
	{
		'width':function(index){return (index+1)*100+'';}, 
		'height':'200',
		'border':'1px solid #ff0'
	}
	);
});

attr() 외에도 css() 등의 메서드들 전부 이런 식으로 객체를 활용하여 두가지 이상의 css 를 동시에 제어할 수 있습니다.

attr()로는 속성값을 제어할 수 있었다면

css()로는 스타일과 관련된 기능들을 수행할 수 있습니다.