note

attr()메서드 Getter / Setter / 본문

JavaScript/jQuery

attr()메서드 Getter / Setter /

투한 2012. 3. 21. 10:40

Getter






<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
	$(document).ready(function (){
		//변수를 선언합니다.
		var src= $('img').attr('src');
		
		//출력합니다.
		alert(src);
	});
</script>
<body>
	<img src="iu1.jpg"/>
	<img src="iu2.jpg"/>
	<img src="iu3.jpg"/>
</body>
</html>


img에 대한 정보를 빼옴

다 나오는것이 아니라

처음 이미지 정보를 가지고 옴 





setter








<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
	$(document).ready(function (){
		$('img').attr('width',200);
	});
</script>
<body>
	<img src="iu1.jpg"/>
	<img src="iu2.jpg"/>
	<img src="iu3.jpg"/>
</body>
</html>


width를 200으로 고정




setter(2)









<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
	$(document).ready(function (){
		$('img').attr('width',function (index){
			return (index + 1) * 100;
		});
	});
</script>
<body>
	<img src="iu1.jpg"/>
	<img src="iu2.jpg"/>
	<img src="iu3.jpg"/>
</body>
</html>


루프를 돌때 100 -> 200 -> 300 (이미지 사이즈)




저작자표시 비영리 변경금지 (새창열림)

'JavaScript > jQuery' 카테고리의 다른 글

html() 메서드  (0) 2012.03.21
removeAttr()메서드  (0) 2012.03.21
removeClass()메서드  (0) 2012.03.21
addClass()메서드 / addClass() 메서드의 콜백함수  (0) 2012.03.21
XML 파싱  (0) 2012.03.21
'JavaScript/jQuery' Related Articles more