lovecoding
/
W260426


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img class="img" src="./img/phone.png" alt="phone">
    <button id="btn">切换图片</button>
    <script>
        // 获取元素
        var img = document.getElementsByTagName("img")[0];
        var btn = document.getElementById("btn");

        // 绑定事件
        btn.onclick = function(){
            // 方法一 通过setAttribute()方法设置属性值
            // 通过属性去控制标签
            // getAttribute()方法可以获取元素的属性值 一个参数 括号内部为属性名
            // setAttribute()方法可以设置元素的属性值 两个参数  第一个为属性名，第二个为属性值
            // var imgSrc = img.getAttribute("src");
            // var imgAlt = img.getAttribute("alt");
            // var imgClass = img.getAttribute("class");
            // console.log(imgSrc, imgAlt, imgClass);
            // 切换图片
            // img.setAttribute("src","./img/phone2.png");

            // 方法二 直接通过属性名赋值
            // var imgSrc = img.src;
            // img.src = "./img/phone2.png";
            // console.log(imgSrc);
        }
    </script>
</body>
</html>