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. 如何在WCF中用TcpTrace工具查看发送和接收的SOAP消息

    WCF对消息加密(只对消息加密,不考虑Authorize)其实很简单,只要在server和client端的binding加入security mode为Message(还有Transport, Tra ...

  2. RDLC 图形报表预览时 “本地报表处理期间错误”

    在RDLC报表中有图形报表的导出和打印都正常,但预览时"本地报表处理期间错误",这是因为你设置的图形太宽已经超过默认的A4 纸的宽度,解决办法:报表页面的报表--->报表属性 ...

  3. java 高级用法整理

    一.retentionpolicy.class vs runtime区别 java5,增加了注解的功能:其中retentionpolicy注解的生命周期,提供了三种选择策略 source.class和 ...

  4. elasticsearch 忽略大小写模糊搜索实现(转)

    在es查询时不区分大小写,可以让查询更方便,具体设置如下: { "settings": { "analysis": { "analyzer" ...

  5. 【被C折腾系列】用C调DIOCP编码客户端通信

    前几天有个朋友,说他们公司做手游,服务端用的DIOCP3里面做文件服务器,客户端用cocos-x,在调试与diocp通信时老是失败! 于是,我下载了一个Codeblocks经过几个小时的折腾,终于折腾 ...

  6. servlet中web.xml配置详解

    Web.xml常用元素 <web-app> 所有部署描述符文件的顶层(根)元素 <display-name></display-name>定义了WEB应用的名字 & ...

  7. 【emWin】例程二十一：窗口对象——Edit

    简介: 编辑框通常用作输入文本的主要用户界面,也可使用编辑字段以二进制.十进制或十六进制模式输入值. 触摸校准(上电可选择是否进入校准界面) 实验指导书及代码包下载: 链接:http://pan.ba ...

  8. 【Unity】UGUI无法修改UI元素的Pivot锚点位置

    如下图,要点击切换左边的Toggle按钮变为Pivot才可以编辑Pivot!   参考: https://answers.unity.com/questions/871238/cant-change- ...

  9. html5——canvas画布

    一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...

  10. Sphinx 2.2.11-release reference manual

    1. Introduction 1.1. About 1.2. Sphinx features 1.3. Where to get Sphinx 1.4. License 1.5. Credits 1 ...