<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<img src="img/1.jpg" alt="这是一双鞋" id="shoes" data='img/01.jpg'>
<input type="button" value='切换' id="btn">
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function(){
// console.log(btn.type);
//只要是HMTL语言中官方定义过的标签的属性，都可以通过 dom.属性名 来获取
var domImg = document.getElementById("shoes");
// 1.知识点：获取自定义属性 dom.getAttribute('属性名')
// getAttribute()只能获取属性的值
// getAttribute()是万能的获取dom元素属性值的方法。
// console.log(domImg.getAttribute('alt'));
// console.log(domImg.getAttribute('src'));
var path = domImg.getAttribute('data');
domImg.src = path;
// domImg.getAttribute('src') = "img/01.jpg";
}
</script>
</body>
</html>
