JavaScript 控制图片属性:实现灯泡开关效果
页面中包含img图像和两个按钮,一个按钮显示'打开',一个按钮显示'关闭'。点击'打开'按钮后,图片显示的灯泡是亮的;点击'关闭'按钮后,图片显示的灯泡是暗的。
HTML 代码:
<img id='myImg' src='image.jpg'>
<button id='openBtn'>打开</button>
<button id='closeBtn'>关闭</button>
JS 代码:
var img = document.getElementById('myImg');
var openBtn = document.getElementById('openBtn');
var closeBtn = document.getElementById('closeBtn');
openBtn.onclick = function() {
img.src = 'image-on.jpg';
}
closeBtn.onclick = function() {
img.src = 'image-off.jpg';
}
其中,'image-on.jpg' 是灯泡亮的图片,'image-off.jpg' 是灯泡暗的图片。点击'打开'按钮后,将 img 的 src 属性设置为 'image-on.jpg',点击'关闭'按钮后,将 img 的 src 属性设置为 'image-off.jpg'。
原文地址: https://www.cveoy.top/t/topic/jN1t 著作权归作者所有。请勿转载和采集!