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. windows环境telnet发送命令

    telnet *.*.*.* port ,然后crtl+]进入命令模式,使用send发送消息,如:send hello,murphy 常用命令: open : 使用 openhostname 可以建立 ...

  3. cmd命令中截取日期字符

    %date:~0,10% 表示年份    

  4. Socket网络编程--聊天程序(7)

    接上一小节,本来是计划这一节用来讲数据库的增删改查,但是在实现的过程中,出现了一点小问题,也不是技术的问题,就是在字符界面上比较不好操作.比如要注册一个帐号,就需要弄个字符界面提示,然后输入数字表示选 ...

  5. C# 创建 读取 更新 XML文件

    public static class XmlHelper { /// <summary> /// 读取节点值 /// </summary> /// <param nam ...

  6. hdoj：2047

    #include <iostream> using namespace std; ] = { , , }; // O,E 组成长度为n的数量 long long fib(int n) { ...

  7. ffmpeg 移植到 android 并使用

    同步更新至个人blog:http://dxjia.cn/2015/07/ffmpeg-porting-to-android/ 空闲做了个小应用,从视频里截图,然后再将截图拼接为一个gif动画: 起初使 ...

  8. (原)Android在子线程用handler发送的消息，主线程是怎么loop到的？

    来自知乎:https://www.zhihu.com/question/48130951?sort=created   大家都知道Android的Looper是ThreadLocal方式实现,每个线程 ...

  9. Cisco VLAN ACL配置

    什么是ACL? ACL全称访问控制列表(Access Control List),主要通过配置一组规则进行过滤路由器或交换机接口进出的数据包, 是控制访问的一种网络技术手段, ACL适用于所有的被路由 ...

  10. firadisk 把 win7（32位） 装入 VHD ：仅仅支持内存模式：--mem

    关键1:对于 win7(32位)来说,还可以在设备管理器内,通过添加“过时”硬件的方式导入wvblk驱动. 附件: grub4dos firadisk驱动