문서 객체의 속성

문서 객체의 속성

문서 객체의 속성 검사

attr()

: 속성과 관련된 모든 기능을 수행합니다.

ex)

$(document).ready(function() {
	//변수를 선언합니다.
	var src = $('img').attr('src');

	//출력합니다.
	alert(src);
});

코드를 실행하면 첫 번째 문서 객체의 속성을 출력하는 것을 확인할 수 있다.

대부분의 값을 알아내는 메서드는 여러 개의 문서 객체를 선택 했을 때, 첫 번째에 위치한 문서 객체의 값을 출력한다. 

문서 객체의 속성 추가

세 가지 형태

1. $(selector).attr(name, value);

2. $(selector).attr(name, function(index, attr){});

3. $(selector).attr(object);

1번 예시)

$(document).ready(function() {
	$('img').attr('width', 200);
});

2번 예시)

index 매개변수를 갖는 함수를 입력합니다.

$(document).ready(function() {
	$('img').attr('width', function(index) {
		return (index + 1) * 100;
	});
});

3번 예시) 
매개변수에 객체를 입력합니다. 
키로 속성의 이름을 지정하고, 값을 입력

$(document).ready(function() {
	$('img').attr({
		width: function (index) {
			return (index + 1) * 100;
		},
		height: 100
	});
});

문서 객체의 속성 제거

removeAttr(name)

: 문서 객체의 속성을 제거합니다.

ex)

$(document).ready(function() {
	$('h1').removeAttr('data-index');
});