JavaScript 改变 HTML 图像
JavaScript 改变 HTML 图像的核心是通过动态修改 <img>
标签的 src
属性或调整 CSS 样式实现图像切换或视觉效果变化。以下是具体方法与场景解析:
一、核心方法:修改 src
属性
1. 直接替换图像路径
通过 document.getElementById()
获取图像元素,修改其 src
属性即可切换图片:
function changeImage() {const img = document.getElementById("myImage");img.src = "new-image.jpg"; // 新图片路径
}
- 场景:实现图片轮播、按钮切换图像等。
2. 条件判断切换
根据当前图片状态动态切换(如灯泡开关效果):
<body><img id="bulb" src="./images/pic_bulbon.gif" alt