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 图像的更多相关文章

  1. 客户端的javascript改变了asp.net webform页面控件的值,后台代码中如何获取修改后的值。

    客户端的javascript改变了asp.net webform页面控件的值,后台代码中如何获取修改后的值.     无论是什么的html控件,只要加上了runat="server" ...

  2. 实时监听 JavaScript改变 input 值 input输入框内容 value 变化实时监听

    思路:通过setInterval()方法去定时对比新旧值 当时候JavaScript的onchange 和onpropertychange(注意ie版本) 监听输入框input时间,人为改变值是可以触 ...

  3. javascript改变样式(cssFloat,styleFloat)

    昨天遇到一用js改变元素浮动的,当时直接写了 obj.style.float="left";结果没起作用:查了资料后才发现不能这样写,现在整理下几种样式写法 1,直接写css属性的 ...

  4. javascript改变style样式和css样式

    转载 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的 ...

  5. js | javascript改变style样式和css样式

    转载 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的 ...

  6. 5.JavaScript改变样式,验证用户输入

    ① x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式 ② if ...

  7. javaScript改变HTML

    改变HTML输出流: 在JavaScript中,document.write() 可用于直接向HTML输出流写内容 <!DOCTYPE html> <html> <bod ...

  8. HTML+JavaScript画函数图像

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 使用javascript改变图片路径

    效果预览:http://keleyi.com/keleyi/phtml/jstexiao/16.htm 代码如下: <!DOCTYPE html> <html> <hea ...

随机推荐

  1. JavaBean之lombok

    参见:https://www.ibm.com/developerworks/cn/opensource/os-lombok/ http://blog.didispace.com/java-lombok ...

  2. echarts 通过dom获取echarts实例,批量监听reset

    重点在于 echarts.getInstanceByDom 这个 API 我的js: // 懒加载优化:滚动节流策略 var __SCROLLTIMER__ = null // 重新设置 echart ...

  3. SNF快速开发平台MVC-单据状态水印

    1.   单据状态水印 1.1.      效果展示 1.2.      调用说明 与easyui的调用方式类似,可以在js中调用,也可以在html中写好所有属性,直接渲染. 如下,在html中写好所 ...

  4. AJAX技术之DWR框架

    DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在 ...

  5. 读取Excel二进制写入DB,并从DB中读取生成Excel文件

    namespace SendMailSMSService { class Program { static void Main(string[] args) { var connString = Sq ...

  6. git 创建标签

    在Git中打标签非常简单,首先,切换到需要打标签的分支上: $ git branch * dev master $ git checkout master Switched to branch 'ma ...

  7. [转]Object.keys()和for in的排序问题

    原文地址:https://www.jianshu.com/p/a086ff48be6e Object.keys()和for in 具有相同的排列顺序 如果属性名的类型是Number,那么Object. ...

  8. CentOS配置Tomcat开机启动

    通常我们进行服务器维护的时候需要注意点为,服务器上的容器一般都是开机启动,减少停机后应用还需要一个一个启动的麻烦. 1) 新建tomcat文件 touch /etc/rc.d/init.d/tomca ...

  9. Git 修正错误

    大部分的人都会犯错.所以每VCS提供了一个功能,修正错误,直到特定的点. Git提供功能使用,我们可以撤销已作出的修改到本地资源库. 假设用户不小心做了一些更改,以他的本地的仓库,现在他要扔掉这些变化 ...

  10. spring boot mybatis 整合教程

    本项目使用的环境: 开发工具:Intellij IDEA 2017.1.3 springboot: 1.5.6 jdk:1.8.0_161 maven:3.3.9 额外功能 PageHelper 分页 ...