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. 【Visual Studio】Visual Studio对CLR异常的特殊支持

    Visual Studio 对异常进行了特殊的支持,它能够在进行了特殊设置后,使代码中的try catch块失效.也就是说,一个异常在正常情况下应该能够被某个特殊的try catch块捕获,但是Vis ...

  2. 全面理解Javascript闭包和闭包的几种写法及用途【转】

    一.什么是闭包和闭包的几种写法和用法 1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. ...

  3. Nginx-rtmp 直播媒体实时流实现

    0. 前言 这段时间在搭建一个IPCamera项目服务器.视频点对点通话,客户端会查看设备端的音视频实时流.为了省流量,是通过P2P进行穿透.但是由于NAT设备的原因和IPV4的枯竭.有些设备是无法进 ...

  4. 【IOS】java 与oc之间的比较

    Cocoa是什么,Cocoa是使用OC语言编写的工具包,里面有大量的类库.结构体,其实就相当于java中的标准API.C++中的标准库.OC中没有命名空间的概念,所以使用加前缀来防止命名冲突,因此你会 ...

  5. 发展简史jQuery时间轴特效

    发展简史jQuery时间轴特效.这是一款鼠标滚动到一定的高度动画显示企业发展时间轴特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wr ...

  6. Spring AOP 详解[转]

    此前对于AOP的使用仅限于声明式事务,除此之外在实际开发中也没有遇到过与之相关的问题.最近项目中遇到了以下几点需求,仔细思考之后,觉得采用AOP 来解决.一方面是为了以更加灵活的方式来解决问题,另一方 ...

  7. [Object Tracking] Contour Detection through OpenCV

    利用OpenCV检测图像中的长方形画布或纸张并提取图像内容 - 阅读笔记 相对来说,如下链接是此文的高阶方案版本,做对比是极好的. [Object Tracking] Contour Detectio ...

  8. [Algorithm] Asymptotic Growth Rate

    f(n) 的形式 vs 判定形势 但,此题型过于简单,一般不出现在考题中. Extended: link Let's set n = 2^m, so m = log(n) T(n) = 2*T(n^( ...

  9. SQLSVR 之 EXISTS

    来个实例看看 CREATE TABLE #temp( id BIGINT, name VARCHAR(max), age INT ) CREATE TABLE #tempmain( id BIGINT ...

  10. 排序算法--选择排序(Selection Sort)_C#程序实现

    排序算法--选择排序(Selection Sort)_C#程序实现 排序(Sort)是计算机程序设计中的一种重要操作,也是日常生活中经常遇到的问题.例如,字典中的单词是以字母的顺序排列,否则,使用起来 ...