位置:电子教程 > JavaScript教程 (如果看不到内容请使用360浏览器) 推荐学习资源
课程概要
JavaScript入门
JavaScript 语法
JavaScript 变量
JavaScript 数据类型
JavaScript 对象
JavaScript 函数
JavaScript 作用域
JavaScript 事件
JavaScript 字符串
JavaScript 运算符
JavaScript 比较 和 逻辑运算符
JavaScript if...Else 语句
JavaScript switch 语句
JavaScript for 循环
JavaScript while 循环
JavaScript break 和 continue 语句
JavaScript typeof, null, 和 undefined
JavaScript 类型转换
JavaScript 正则表达式
JavaScript 错误 - throw、try 和 catch
当前阅读教程: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>

默认效果图

小白教程网www.2d5.net

和点击灯泡的效果图

小白教程网www.2d5.net

image.png


以上实例中代码 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)
毕业设计网             广告联系QQ:45157718(微信同号)