<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex06DOM이미지변경</title>
</head>
<body>
<img src="img/img1.gif" width="300px" height="300px">
<br>
<button>이미지 변경</button>
<script>
let btn = document.querySelector('button')
let img = document.querySelector('img')
btn.addEventListener('click',function(){
// match 함수를 이용해 이미지 변경
if(img.src.match("img/img1.gif")){
img.src="img/img2.gif"
}else{
img.src = "img/img1.gif"
}
// img src를 이용해 이미지 변경
console.log(img.src)
if(img.src == 'http://127.0.0.1:5500/JS%EA%B0%9C%EC%9A%94/03Object,DOM/img/img1.gif'){
img.src = 'img/img2.gif'
}else{
img.src = 'img/img1.gif'
}
})
</script>
</body>
</html>
이미지1
이미지2
'JavaScript' 카테고리의 다른 글
| [JavaScript] jQuery 사용법 (0) | 2022.05.31 |
|---|---|
| [JavaScript] 스타일 변경 (0) | 2022.05.31 |
| [JavaScript] 위시리스트 만들기 (0) | 2022.05.30 |
| [JavaScript] input 태그 안에 텍스트 내용 알림 창 띄우기 (0) | 2022.05.27 |
| [JavaScript] DOM2 (0) | 2022.05.27 |