 |
位置：电子教程 > JavaScript教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > JavaScript教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：JavaScript教程 > 改变 HTML 图像（JavaScript） | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： 改变 HTML 内容（JavaScript） | 下一篇： 改变 HTML 样式（JavaScript） |
|
本例会动态地改变 HTML <image> 的来源（src）： 点亮灯泡 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小白教程(www.2d5.net)</title>
</head>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
</body>
</html>默认效果图和点击灯泡的效果图
以上实例中代码 element.src.match("bulbon") 的作用意思是：检索 <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。 |
|
| 上一篇： 改变 HTML 内容（JavaScript） | 下一篇： 改变 HTML 样式（JavaScript） |
