duedue

사진 바꾸기 본문

JavaScript

사진 바꾸기

듀듀닷 2022. 1. 18. 18:43

<style>
section img {
max-width: 100%;
}

.center {
margin: 0 auto;
width: 50%;
}

ul {
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
}

li {
float: left;
margin-right: 1%;
width:24%;
}
</style>
</head>

<body>
<section class="center">
<div>
<img src="img1.jpg" id="bigimg">
</div>
<ul>
<li><img src="thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li>
<li><img src="thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li>
<li><img src="thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li>
</ul>
</section>

<script>
 
var thumbs = document.querySelectorAll('.thumb');
for (var i = 0; i < thumbs.length; i++) {
thumbs[i].onclick = function () {
document.getElementById('bigimg').src = this.dataset.image;
// console.log(this.dataset.image);
};
}
</script>
 
 

querySelectAll() 메서드

사용법

document.quertSelectAll('클래스명')

 

dataset 프로퍼티

<태그명 data-이름 = "xxx.img" >

자바스크립트로  속성값 가져오기

형식

가져온요소.dataset.이름

 

 



'JavaScript' Related Articles more