JavaScript:改变 HTML 图像

Stella981
• 阅读 568

JavaScript:改变 HTML 图像

1.代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>改变Html图片</title>
</head>
<body>
<p>
点击灯泡改变灯的状态
</p>
<script>
function changeImage(){
var element = document.getElementById("image");
if(element.src.match("bulbon")){
element.src = "bulboff.gif";
}
else {
element.src = "bulbon.gif";
}
}
</script>
<img id="image" onclick="changeImage()" src="bulboff.gif"/>
</body>
</html>

2.显示效果如下:

JavaScript:改变 HTML 图像

点击灯泡,如下:

JavaScript:改变 HTML 图像

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java中ajax的用法简单案例
1.index.html<!DOCTYPEhtml<html<head<metacharset"UTF8"<titleInserttitlehere</title<scripttype"text/javascript"src"js/jquery2.1.0.js"
Stella981 Stella981
2年前
Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容
1.html模板<!DOCTYPEhtml<html<head<metacharset"UTF8"<title模板</title</head<body</body</html2.DOCTYPE声明放在html文件头部最新HTML5用<!DOCTYPEhtml
Wesley13 Wesley13
2年前
HTML5 基础知识(二)
<!DOCTYPEhtml<htmllang"en"<head<metacharset"utf8"/<title</title</head<body</body</html<!DOCTYPEhtml
Wesley13 Wesley13
2年前
JS获取表单元素的值
<html<head<metahttpequiv"contenttype"content"text/html;charsetutf8"<title测试</title</head<body<formid"form1"name"form1"文本框
Wesley13 Wesley13
2年前
Echarts
<!DOCTYPEhtml<html   <head      <metacharset"utf8"/      <title</title   </head   <body      <divid"main"style"height:600px;width:500
Wesley13 Wesley13
2年前
PHP加JS实现分片上传,断点续传
  前端代码:<!DOCTYPEhtml<html<head<metacharset"UTF8"/<titlexhr2</title</head<body
Stella981 Stella981
2年前
Js使用面向对象和面向过程的方法实现拖拽物体的效果
1.面向过程的拖拽实现代码:!(https://oscimg.oschina.net/oscnet/d680c759957babef2fec0902676eaa35ad9.gif)<!DOCTYPEhtml<html<head<titledragDiv</title
Wesley13 Wesley13
2年前
2018.3.29 网页中嵌套网页的两种方法
第一种:<!DOCTYPEhtml<html   <head      <metacharset"UTF8"      <title</title   </head   <body      <marqueedirection"right"style"color:
Wesley13 Wesley13
2年前
JS加密解密
调用方法示例:<!DOCTYPEhtml<html<head<metacharset"UTF8"<title</title</head<body<pid"a"</p<pid"b"</p