코딩 이야기
웹 요소에 태그 속성 가져와서 수정하기 본문
728x90
HTML 태그 속성을 가져오거나 수정하는 함수 getAttribute(),setAttribute()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM</title>
<link rel="stylesheet" href="css/product.css">
</head>
<body>
<div id="container">
<h1 id="heading">에디오피아 게뎁</h1>
<div id="prod-pic">
<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200">
<div id="small-pic">
<img src="images/coffee-pink.jpg" class="small">
<img src="images/coffee-blue.jpg" class="small">
<img src="images/coffee-gray.jpg" class="small">
</div>
</div>
<div id="desc">
<ul>
<li>상품명 : 에디오피아 게뎁</li>
<li class="bluetext">판매가 : 9,000원</li>
<li>배송비 : 3,000원<br>(50,000원 이상 구매 시 무료)</li>
<li>적립금 : 180원(2%)</li>
<li>로스팅 : 2019.06.17</li>
<button>장바구니 담기</button>
</ul>
<a href="#" id="view">상세 설명 보기</a>
</div>
<div id="detail">
<hr>
<h2>상품 상세 정보</h2>
<ul>
<li>원산지 : 에디오피아</li>
<li>지 역 : 이르가체프 코체레</li>
<li>농 장 : 게뎁</li>
<li>고 도 : 1,950 ~ 2,000 m</li>
<li>품 종 : 지역 토착종</li>
<li>가공법 : 워시드</li>
</ul>
<h3>Information</h3>
<p>2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.</p>
<h3>Flavor Note</h3>
<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
</div>
<script src="js/showBig.js"></script>
</body>
</html>
스크립트파일
var bigPic = document.querySelector("#cup"); // 큰 이미지 가져옴
var smallPics =document.querySelectorAll(".small"); // 작은 이미지 가져옴 (노드리스트)
for(var i=0; i<smallPics.length; i++){ // 노트 리스트의 각 요소에 접근
smallPics[i].onclick = showBig; // 요소를 누르면 showBig()함수실행
}
function showBig() {
var newPic =this.src; // click 이벤트가 발생한 대상의 src 속성 값 가져옴
bigPic.setAttribute("src",newPic); //newPic 값을 큰 이미지의 src 속성에 할당
}
728x90
'JAVA스크립트' 카테고리의 다른 글
| DOM에 요소 추가하기 (0) | 2023.01.16 |
|---|---|
| DOM에서 이벤트 처리하기 (0) | 2023.01.13 |
| DOM 문서 객체 모델 (0) | 2023.01.13 |
| 다시 정리하는 Array 객체 (0) | 2023.01.12 |
| Javascript에서의 오류 처리 (0) | 2023.01.11 |
Comments