<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>操作元素之修改元素屬性</title>
<style>img {
width: 300px;
}</style>
</head>
<body>
<button id="ldh">劉德華</button>
<button id="zxy">張學友</button> <br>
<img src="https://pic.imgdb.cn/item/6120ef224907e2d39c002925.jpg" alt="" title="劉德華">
<script>// 修改元素屬性 src
// 1. 擷取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. 注冊事件 處理程式
zxy.onclick = function () {
img.src = 'https://pic.imgdb.cn/item/6120ef464907e2d39c007048.jpg';
img.title = '張學友';
}
ldh.onclick = function () {
img.src = 'https://pic.imgdb.cn/item/6120ef224907e2d39c002925.jpg';
img.title = '劉德華';
}</script>
</body>
</html>