可以通过以下步骤实现:
<div>
元素,并为每张照片添加一个唯一的ID,以便在JavaScript中引用它们。<div id="photoContainer">
<img id="photo1" src="photo1.jpg" alt="Photo 1">
<img id="photo2" src="photo2.jpg" alt="Photo 2">
</div>
display
属性将其隐藏起来。#photo2 {
display: none;
}
// 获取照片元素
var photo1 = document.getElementById("photo1");
var photo2 = document.getElementById("photo2");
// 隐藏照片2
photo2.style.display = "none";
// 替换照片函数
function replacePhoto() {
// 切换照片的显示和隐藏
if (photo1.style.display === "none") {
photo1.style.display = "block";
photo2.style.display = "none";
} else {
photo1.style.display = "none";
photo2.style.display = "block";
}
}
// 调用替换照片函数
replacePhoto();
在上述代码中,我们首先获取了照片元素的引用,然后使用style.display
属性来控制照片的显示和隐藏。在replacePhoto()
函数中,我们通过切换照片的显示和隐藏状态来实现照片的替换。
这是一个简单的示例,你可以根据实际需求进行扩展和修改。关于JavaScript、HTML和CSS的更多学习资源,可以参考以下链接:
请注意,以上答案中没有提及腾讯云相关产品和产品介绍链接地址,因为这些内容与问题的主题无关。如果您有其他关于云计算、IT互联网领域的问题,我将很乐意为您提供帮助。
领取专属 10元无门槛券
手把手带您无忧上云