본문 바로가기

Webstoryboy

Category

Explanation

REFERENCE/JQUERY

[jQuery] .attr()

.attr()

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


.attr()

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

문법(Syntax)

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

정의(Definition)

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

Sample1

.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>

Sample2

.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>
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
   
    <h3>속성(Attributes)</h3>
    <div class="list1">
        <input id="check1" type="checkbox" checked="checked">
        <label for="check1">체크</label>
        <p class="desc"></p>
    </div>
    
    <div class="choice1">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>.attr</em>의 속성 값을 가져옵니다.</a>
        <a href="#" class="btn2">클릭하면 <em>.prop</em>의 속성 값을 가져옵니다.</a>
        <a href="#" class="btn3">클릭하면 <em>.is</em>의 속성 값을 가져옵니다.</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 input" ).change(function() {
              var $input = $( this );
              $(".list1 .desc").html( ".attr( \"checked\" ) : " + $input.attr("checked"))
            }).change();
        });
        $(".choice1 .btn2").on("click", function(e){
            e.preventDefault();
            $( ".list1 input" ).change(function() {
              var $input = $( this );
              $(".list1 .desc").html( ".prop( \"checked\" ) : " + $input.prop("checked"))
            }).change();
        });
        $(".choice1 .btn3").on("click", function(e){
            e.preventDefault();
            $( ".list1 input" ).change(function() {
              var $input = $( this );
              $(".list1 .desc").html( ".is( \"checked\" ) : " + $input.is(":checked"))
            }).change();
        });   
</script>
</body>
</html>

Sample3

.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>

Sample4

함수를 사용하여 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>

Sample5

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

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>

Sample6

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

결과

탐색(Traversing)

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>

호환성(Compatibility)

메서드 버전 크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
attr() jQeury 1.x 버전 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
jQeury 2.x 버전 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
jQeury 3.x 버전 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

Tag

AD

comments