JavaScript

[JavaScript] 이미지 변경하기

퓨어맨 2022. 5. 30. 14:11 
<!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