티스토리 뷰

jQuery

[jQuery] .attr()

.attr()

선택한 HTML 요소의 속성 값을 설정하거나 반환합니다.


.attr()

선택한 HTML 요소의 속성 값을 설정하거나 반환합니다.

문법(Syntax)

$("선택자").attr("속성");
$("선택자").attr("속성", "속성값");
$("선택자").attr({"속성":"속성값", "속성":"속성값", .... });
$("선택자").attr("속성", 함수);

정의(Definition)

  • .attr() 메서드는 선택한 요소의 속성 값을 가져옵니다.
  • .attr() 메서드는 선택한 요소의 속성 값을 변경합니다.
  • .attr() 메서드는 선택한 요소의 여러개 속성 값을 변경합니다.
  • .attr() 메서드는 선택한 요소의 속성과 함수를 설정합니다.

샘플(Sample)

.attr을 이용하여 속성 값을 알아냅니다.

jquery
$(".choice1 .btn1").on("click", function(e){
    e.preventDefault();
    $(".list1 .desc").text( $(".list1 img").attr("src") );
});
$(".choice1 .btn2").on("click", function(e){
    e.preventDefault();
    $(".list1 .desc").text( $(".list1 img").attr("alt") );
});
$(".choice1 .btn3").on("click", function(e){
    e.preventDefault();
    $(".list1 .desc").text( $(".list1 img").attr("width") );
});
html
<h3>탐색(Traversing)</h3>
<div class="list1">
    <ul>
        <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" alt="img1" width="150" /></li>
    </ul>
    <p class="desc"></p>
</div>
Total
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li {list-style: none;}
        .select:before {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
   
    <h3>탐색(Traversing)</h3>
    <div class="list1">
        <ul>
            <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" alt="img1" width="150" /></li>
        </ul>
        <p class="desc"></p>
    </div>
    
    <div class="choice1">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 이미지의 주소 값을 가져옵니다.</a>
        <a href="#" class="btn2">클릭하면 이미지의 alt 값을 가져옵니다.</a>
        <a href="#" class="btn3">클릭하면 이미지의 width 값을 가져옵니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice1 .off1").on("click", function(e){
            e.preventDefault();
            $(".list1 p").text("");
        });
        $(".choice1 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list1 .desc").text( $(".list1 img").attr("src") );
        });
        $(".choice1 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list1 .desc").text( $(".list1 img").attr("alt") );
        });
        $(".choice1 .btn3").on("click", function(e){
            e.preventDefault();
            $(".list1 .desc").text( $(".list1 img").attr("width") );
        });
    </script>
</body>
</html>

샘플(Sample)

.attr을 이용하여 속성 값을 변경합니다.

jquery
$(".choice2 .btn1").on("click", function(e){
    e.preventDefault();
    $(".list2 img").attr("width","200");
});
$(".choice2 .btn2").on("click", function(e){
    e.preventDefault();
    $(".list2 img").attr("width","300");
});
$(".choice2 .btn3").on("click", function(e){
    e.preventDefault();
    $(".list2 img").attr("width","400");
});
html
<h3>탐색(Traversing)</h3>
<div class="list2">
    <ul>
        <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" alt="img1" width="150" /></li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li {list-style: none;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
   
    <h3>탐색(Traversing)</h3>
    <div class="list2">
        <ul>
            <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" alt="img1" width="150" /></li>
        </ul>
    </div>
    
    <div class="choice2">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 이미지의 크기를 <em>200</em>으로 변경합니다.</a>
        <a href="#" class="btn2">클릭하면 이미지의 크기를 <em>300</em>으로 변경합니다.</a>
        <a href="#" class="btn3">클릭하면 이미지의 크기를 <em>400</em>으로 변경합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice2 .off1").on("click", function(e){
            e.preventDefault();
            $(".list2 img").attr("width","150");
        });
        $(".choice2 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list2 img").attr("width","200");
        });
        $(".choice2 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list2 img").attr("width","300");
        });
        $(".choice2 .btn3").on("click", function(e){
            e.preventDefault();
            $(".list2 img").attr("width","400");
        });
    </script>
</body>
</html>

샘플(Sample)

.attr을 이용하여 여러 개의 속성 값을 변경합니다.

jquery
$(".choice3 .btn1").on("click", function(e){
    e.preventDefault();
    $(".list3 img").attr({"width":"200" , "alt":"200"});
    $(".list3 .desc").text( "이미지 width값 : "+$(".list3 img").attr("width") + " / " + "이미지 alt값 : "+$(".list3 img").attr("alt") );
});
$(".choice3 .btn2").on("click", function(e){
    e.preventDefault();
    $(".list3 img").attr({"width":"300" , "alt":"300"});
    $(".list3 .desc").text( "이미지 width값 : "+$(".list3 img").attr("width") + " / " + "이미지 alt값 : "+$(".list3 img").attr("alt") );
});
html
<h3>탐색(Traversing)</h3>
<div class="list3">
    <ul>
        <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" alt="150" width="150" /></li>
    </ul>
    <p class="desc"></p>
</div>
Total
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li {list-style: none;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
   
    <h3>탐색(Traversing)</h3>
    <div class="list3">
        <ul>
            <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" alt="150" width="150" /></li>
        </ul>
        <p class="desc"></p>
    </div>
    
    <div class="choice3">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 이미지의 <em>크기(200)</em>와 <em>alt(200)</em>값 변경합니다.</a>
        <a href="#" class="btn2">클릭하면 이미지의 <em>크기(300)</em>와 <em>alt(300)</em>값 변경합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice3 .off1").on("click", function(e){
            e.preventDefault();
            $(".list3 img").attr({"width":"150" , "alt":"150"});
            $(".list3 .desc").text(" ");
        });
        $(".choice3 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list3 img").attr({"width":"200" , "alt":"200"});
            $(".list3 .desc").text( "이미지 width값 : "+$(".list3 img").attr("width") + " / " + "이미지 alt값 : "+$(".list3 img").attr("alt") );
        });
        $(".choice3 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list3 img").attr({"width":"300" , "alt":"300"});
            $(".list3 .desc").text( "이미지 width값 : "+$(".list3 img").attr("width") + " / " + "이미지 alt값 : "+$(".list3 img").attr("alt") );
        });
    </script>
</body>
</html>

샘플(Sample)

함수를 사용하여 title 값은 src에 넣어주는 예제입니다.

jquery
$(".choice4 .btn1").on("click", function(e){
    e.preventDefault();
    $(".list4 img").attr("src", function(){
        return "https://tistory1.daumcdn.net/tistory/2933724/skin/images/" + this.title;
    });
});
html
<h3>탐색(Traversing)</h3>
<div class="list4">
    <ul class="listNo">
        <li><img title="hover01.jpg" alt="150" width="150" /></li>
    </ul>
    <p></p>
</div>
Total
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li {list-style: none;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
   
    <h3>탐색(Traversing)</h3>
    <div class="list4">
        <ul class="listNo">
            <li><img title="hover01.jpg" alt="150" width="150" /></li>
        </ul>
        <p></p>
    </div>
    
    <div class="choice4">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>title</em>값을 가지고와 <em>src</em>에 넣어줍니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice4 .off1").on("click", function(e){
            e.preventDefault();
            $(".list4 img").attr({"src":""});
        });
        $(".choice4 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list4 img").attr("src", function(){
                return "https://tistory1.daumcdn.net/tistory/2933724/skin/images/" + this.title;
            });
        });
    </script>
</body>
</html>

샘플(Sample)

함수를 사용하여 이미지를 순차적으로 크기를 변경하는 예제입니다.

jquery
$(".choice5 .btn1").on("click", function(e){
    e.preventDefault();
    $(".list5 img").attr("width", function(i){
        return (i + 1) * 50;
    });
});
html
<h3>탐색(Traversing)</h3>
<div class="list5">
    <ul>
        <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" alt="150" width="150" /></li>
        <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover02.jpg" alt="150" width="150" /></li>
        <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover03.jpg" alt="150" width="150" /></li>
        <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="150" width="150" /></li>
        <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="150" width="150" /></li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li {list-style: none; display: inline}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
   
    <h3>탐색(Traversing)</h3>
    <div class="list5">
        <ul>
            <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" alt="150" width="150" /></li>
            <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover02.jpg" alt="150" width="150" /></li>
            <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover03.jpg" alt="150" width="150" /></li>
            <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="150" width="150" /></li>
            <li><img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" alt="150" width="150" /></li>
        </ul>
    </div>
    
    <div class="choice5">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 순차적으로 크게 해줍니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice5 .off1").on("click", function(e){
            e.preventDefault();
            $(".list5 img").attr({"width":"150"});
        });
        $(".choice5 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list5 img").attr("width", function(i){
                return (i + 1) * 50;
            });
        });
    </script>
</body>
</html>

샘플(Sample)

attr을 이용하여 간단한 탭 메뉴를 만드는 예제입니다.

Sample6
jquery
$(".tab-btn ul li").click(function(){
    var target = $(this);
    var index = target.index()+1;
    //alert(index);
    target.find("a").text("Menu"+index);
    $(".tab-cont img").attr({"src":"https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover0"+index+".jpg","alt":"이미지"+index });
});
html
<h3>탐색(Traversing)</h3>
<div id="tab-menu">
    <div class="tab-btn">
        <ul>
            <li><a href="#">Tab1</a></li>
            <li><a href="#">Tab2</a></li>
            <li><a href="#">Tab3</a></li>
            <li><a href="#">Tab4</a></li>
            <li><a href="#">Tab5</a></li>
        </ul>
    </div>
    <div class="tab-cont">
        <img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" width="350" alt="이미지1">
    </div>
</div>
css
#tab-menu {width: 350px; margin:50px auto;}
.tab-btn {margin-bottom: 1px;  }
.tab-btn ul {overflow: hidden;}
.tab-btn li {float: left; width: 20%; text-align: center;}
.tab-btn li a {padding: 14px 10px 10px 10px ; display: block; background-color: #1e88e5; margin-right: 1px; color:#fff;}
Total
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        * {padding: 0; margin:0;}
		li {list-style: none;}
		a {text-decoration: none; color: #666;}
		#tab-menu {width: 350px; margin:50px auto;}
		.tab-btn {margin-bottom: 1px;  }
		.tab-btn ul {overflow: hidden;}
		.tab-btn li {float: left; width: 20%; text-align: center;}
		.tab-btn li a {padding: 14px 10px 10px 10px ; display: block; background-color: #1e88e5; margin-right: 1px; color:#fff;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div id="tab-menu">
		<div class="tab-btn">
			<ul>
				<li><a href="#">Tab1</a></li>
				<li><a href="#">Tab2</a></li>
				<li><a href="#">Tab3</a></li>
				<li><a href="#">Tab4</a></li>
				<li><a href="#">Tab5</a></li>
			</ul>
		</div>
		<div class="tab-cont">
			<img src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" width="350" alt="이미지1">
		</div>
	</div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
		//글씨를 클릭하면 tab --> menu로 변경해주세요.
		// $(".tab-btn ul li").click(function(){
		// 	$(".tab-btn ul li a").text("Menu");
		// });
		
		//글씨를 클릭하면 tab3 --> menu3로 변경해주세요.
		// $(".tab-btn ul li").click(function(){
		// 	var target = $(this);
		// 	var index = target.index()+1;
		// 	//alert(index);
		// 	target.find("a").text("Menu"+index);
		// });
		
		//해당 버튼을 클릭하면 해당 이미지 나오게 하기
		// var attr = $(".tab-cont img").attr("src");
		// //alert(attr);
		// $(".tab-btn ul li:eq(0)").click(function(){
		// 	$(".tab-cont img").attr({ "src":"https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" , "alt":"이미지1" });
		// });
		// $(".tab-btn ul li:eq(1)").click(function(){
		// 	$(".tab-cont img").attr({ "src":"https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover02.jpg" , "alt":"이미지2" });
		// });
		// $(".tab-btn ul li:eq(2)").click(function(){
		// 	$(".tab-cont img").attr({ "src":"https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover03.jpg" , "alt":"이미지3" });
		// });
		// $(".tab-btn ul li:eq(3)").click(function(){
		// 	$(".tab-cont img").attr({ "src":"https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" , "alt":"이미지5" });
		// });
		// $(".tab-btn ul li:eq(4)").click(function(){
		// 	$(".tab-cont img").attr({ "src":"https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover05.jpg" , "alt":"이미지6" });
		// });
		
		//한번에 쓰기
		$(".tab-btn ul li").click(function(){
			var target = $(this);
			var index = target.index()+1;
			//alert(index);
			target.find("a").text("Menu"+index);
			$(".tab-cont img").attr({"src":"https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover0"+index+".jpg","alt":"이미지"+index });
		});
	</script>
</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

태그(Tag) 더보기

질문하기(Questions)
댓글쓰기 폼