코드랩 레퍼런스
.attr() 본문
.attr() 메서드는 HTML 요소의 속성 값을 설정하거나 반환합니다.
Definition
- .attr() 메서드는 선택한 요소의 속성 값을 가져옵니다.
- .attr() 메서드는 선택한 요소의 속성 값을 변경합니다.
- .attr() 메서드는 선택한 요소의 여러개 속성 값을 변경합니다.
- .attr() 메서드는 선택한 요소의 속성과 함수를 설정합니다.
Syntax
$(selector).attr(속성);
$(selector).attr(속성, 속성값);
$(selector).attr({속성:속성값, 속성:속성값, .... });
$(selector).attr(속성, 함수);
$(selector).attr(속성, 속성값);
$(selector).attr({속성:속성값, 속성:속성값, .... });
$(selector).attr(속성, 함수);
Compatibility
 |
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| .attr() |
Sample1 선택한 요소의 속성 값을 가져옵니다.
<a href="#" title="이미지" id="attr" class="attr">제이쿼리(jQuery) : attr()</a>
href 값 : #
title 값 : 이미지
id 값 : attr
class 값 : attr
href 값 : #
title 값 : 이미지
id 값 : attr
class 값 : attr
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery) : attr()</title>
</head>
<body>
<a href="#" title="이미지" id="attr" class="attr">제이쿼리(jQuery) : attr()</a>
<ul>
<li>href 값 : <span class="c1">0</span></li>
<li>title 값 : <span class="c2">0</span></li>
<li>id 값 : <span class="c3">0</span></li>
<li>class 값 : <span class="c4">0</span></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
var href = $("#attr").attr("href");
var title = $("#attr").attr("title");
var id = $("#attr").attr("id");
var cl = $("#attr").attr("class");
$(".c1").text(href);
$(".c2").text(title);
$(".c3").text(id);
$(".c4").text(cl);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery) : attr()</title>
</head>
<body>
<img class="img" src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/sam1.png" alt="이미지" width="100" height="100">
<button class="btn1">img100</button>
<button class="btn2">img200</button>
<button class="btn3">img300</button>
<button class="btn4">img400</button>
<button class="btn5">img500</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(".btn1").click(function(){
$(".img").attr("width","100");
});
$(".btn2").click(function(){
$(".img").attr("width","200");
});
$(".btn3").click(function(){
$(".img").attr("width","300");
});
$(".btn4").click(function(){
$(".img").attr("width","400");
});
$(".btn5").click(function(){
$(".img").attr("width","500");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery) : attr()</title>
</head>
<body>
<img class="img" src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/sam1.png" alt="이미지" width="100" height="100"><br><br>
<button class="btn6">img100</button>
<button class="btn7">img200</button>
<button class="btn8">img300</button>
<button class="btn9">img400</button>
<button class="btn10">img500</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(".btn6").click(function(){
$(".img").attr({"width":"100","height":"100"});
});
$(".btn7").click(function(){
$(".img").attr({"width":"200","height":"200"});
});
$(".btn8").click(function(){
$(".img").attr({"width":"300","height":"300"});
});
$(".btn9").click(function(){
$(".img").attr({"width":"400","height":"400"});
});
$(".btn10").click(function(){
$(".img").attr({"width":"500","height":"500"});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery) : attr()</title>
</head>
<body>
<img class="img2" src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/sam1.png" alt="이미지" width="100" height="100">
<img class="img2" src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/sam1.png" alt="이미지" width="100" height="100">
<img class="img2" src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/sam1.png" alt="이미지" width="100" height="100">
<img class="img2" src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/sam1.png" alt="이미지" width="100" height="100">
<img class="img2" src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/sam1.png" alt="이미지" width="100" height="100">
<br><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
// $('.img2').attr('width','300');
// $('.img2').attr('width', function(i){
// return (i+1) * 100;
// });
$('.img2').attr({
width: function(i){
return (i + 1) * 50;
},
height: function(j){
return (j + 1) * 50;
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr를 이용한 탭 메뉴</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;}
.tab-cont { }
</style>
</head>
<body>
<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="assets/img/img07.jpg" width="350" alt="이미지1">
</div>
</div>
<script src="assets/js/jquery-1.12.4.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":"assets/img/img07.jpg" , "alt":"이미지1" });
// });
// $(".tab-btn ul li:eq(1)").click(function(){
// $(".tab-cont img").attr({ "src":"assets/img/img06.jpg" , "alt":"이미지2" });
// });
// $(".tab-btn ul li:eq(2)").click(function(){
// $(".tab-cont img").attr({ "src":"assets/img/img05.jpg" , "alt":"이미지3" });
// });
// $(".tab-btn ul li:eq(3)").click(function(){
// $(".tab-cont img").attr({ "src":"assets/img/img04.jpg" , "alt":"이미지5" });
// });
// $(".tab-btn ul li:eq(4)").click(function(){
// $(".tab-cont img").attr({ "src":"assets/img/img03.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":"assets/img/img0"+index+".jpg","alt":"이미지"+index });
});
</script>
</body>
</html>
Share
Ad
Comments