不看着w3cschool不会写，要记的太多太多了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style>
body {
background-color: pink;
text-align: center;
}
.image-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.image-container img {
width: 600px;
height: 700px;
border: 0;
}
.button-container {
margin-top: 20px;
}
.button-container input[type="button"] {
font-size: 16px;
}
.button-container input[type="button"]:hover {
color: red;
}
</style>
</head>
<body>
<div class="image-container">
<img id="myImage" src="../img/66c0359921a3b9918001d2e3d5b4ba0.jpg">
</div>
<div class="button-container">
<input type="button" onclick="on()" value="确认">
<span style="font-size: 48px; color: red;">是否查看cy的腹肌</span>
<input type="button" onclick="off()" value="取消">
</div>
<script>
function on(){
document.getElementById('myImage').src='../img/38a801089221d1d8bb3a2cd1db07681.jpg';
document.getElementById('myImage').style.width = '600px';
document.getElementById('myImage').style.height = '700px';
document.querySelector('.button-container span').innerText = '很遗憾，没有腹肌';
}
function off(){
document.getElementById('myImage').src='../img/66c0359921a3b9918001d2e3d5b4ba0.jpg';
document.getElementById('myImage').style.width = '600px';
document.getElementById('myImage').style.height = '700px';
alert('不许取消！');
}
</script>
</body>
</html>
标签：style,container,button,getElementById,myImage,html,周六,document From： https://www.cnblogs.com/zeyangshuaige/p/17590531.html