|
|
@@ -0,0 +1,36 @@
|
|
|
+<!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>
|
