当前阅读教程: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) |