所以我正在做一个项目，这个项目中的按钮在单击命令时会跟随命令。开始是一个橙色的框，我的命令使它增长、变蓝、褪色或重置。我想添加一个"；"惊喜"；按钮，将框替换为图像。
这是我在JS中为#button5编写的命令之一。我甚至把箱子拿走了。
document.getElementById("button5").addEventListener(
"click",
function() {
document.getElementById("box").remove();
}
);<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>
<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>
<button id="button5">Surprise</button>您可以使用它来切换您的图像：
document.getElementById("button5").addEventListener(
"click",
function(){
var box = document.getElementById("box");
if(box.style.display !== "none"){
document.getElementById("box").style.display = "none";
document.getElementById("image").style.display = "block";
return;
}
document.getElementById("box").style.display = "block";
document.getElementById("image").style.display = "none";
});<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px">
</div>
<img id="image" src="https://placekitten.com/150/150" style="display: none; height:150px; width:150px; margin:25px"></img>
<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>
<button id="button5">Surprise</button>不删除完整的框，只删除橙色，并创建一个新的img标记来在同一div标记中插入图像。
此外，每当单击任何其他按钮时，只需删除img标记即可。
添加了，单击事件中的两个按钮来显示行为。
document.getElementById("button5").addEventListener("click", function () {
document.getElementById("box").style.backgroundColor = "";
let img = document.createElement("img");
img.setAttribute("src", ""); // add the image source here
img.setAttribute("id", "image");
img.setAttribute("alt", "image");
document.getElementById("box").append(img);
})
document.getElementById("button1").addEventListener("click", function () {
document.getElementById("box").style.backgroundColor = "orange";
document.getElementById("image").remove();
})<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>
<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>
<button id="button5">Surprise</button>您可以在Javascript中通过innerHTML添加带图像的HTML。
例如function addImage() { var newImage=document.getElementById('myBox'); newImage.innerHTML = '<img src="image.jpg" alt="image">'; console.log("add image"); }
您可以添加/删除classList名称，这些名称定义了要在元素上显示的CSS。对于图像，只需移除box类，然后添加一个以图像为背景的新类。
const buttons = document.querySelectorAll('button')
const box = document.getElementById('box')
function changeBox(e) {
if (e.target.id === 'button1') {
box.classList.add('translate')
} else if (e.target.id === 'button2') {
box.classList = ''
box.classList.add('blue')
} else if (e.target.id === 'button3') {
box.classList.add('fade')
} else if (e.target.id === 'button4') {
box.classList = ''
box.classList.add('box')
} else if (e.target.id === 'button5') {
box.classList.remove('box')
box.classList.add('img')
}
}
buttons.forEach(button => {
button.addEventListener('click', e => changeBox(e))
}).box {
height: 150px;
width: 150px;
background-color: orange;
margin: 25px;
}
.img {
height: 150px;
width: 150px;
background: url('https://upload.wikimedia.org/wikipedia/commons/8/81/Stackoverflow_icon.png') no-repeat rgba(0, 230, 230, 0.5);
margin: 25px;
}
.translate {
transform: scale(1.2);
transition: all 1s;
}
.fade {
opacity: 0;
animation: fade 1s ease-in-out;
}
.blue {
height: 150px;
width: 150px;
background-color: blue;
margin: 25px;
}
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}<p>Press the buttons to change the box!</p>
<div id="box" class="box"></div>
<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>
<button id="button5">Surprise</button>document.getElementById("button5").addEventListener(
"click",
function () {
document.getElementById("box").innerHTML = "<img src='./img/1.png' />"
});
或
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px">
<img src="" id="pic">
</div>
document.getElementById("button5").addEventListener(
"click",
function () {
document.getElementById("pic").src = "./img/1.png"
});