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. 译: 4. RabbitMQ Spring AMQP 之 Routing 路由

    在上一个教程中,我们构建了一个简单的fanout(扇出)交换.我们能够向许多接收者广播消息. 在本教程中,我们将为其添加一个功能 - 我们将只能订阅一部分消息.例如,我们将只能将消息指向感兴趣的特定颜 ...

  2. 菜鸟学Java（二十三）——Java内存分析

    我们常说的Java内存主要分为四大块(寄存器不在考虑之内,我们无法用代码来操控它):stack(栈).heap(堆).data segment(数据区).code segment(代码区).它们的主要 ...

  3. Fluent动网格【5】：部件变形

    在动网格中关于部件运动除了指定刚体运动外,有时还需要指定某些边界的变形,这种情况经常会遇到,尤其是与运动部件存在相连接边界的情况下,如下图中边界1运动导致与之相连的边界2和边界3发生变形. Fluen ...

  4. pandas DataFrame(3)-轴

    和numpy数组(5)-二维数组的轴一样,pandas DataFrame也有轴的概念,决定了方法是对行应用还是对列应用: 以下面这个数据为例说明: 这个数据是5个车站10天内的客流数据: rider ...

  5. [转]PowerDesigner大小写转换

    原文地址:https://blog.csdn.net/fzqlife/article/details/72769959?utm_source=blogxgwz7 在菜单栏找到:Tools-->E ...

  6. 【emWin】例程十六：窗口管理器

    介绍: 显示器上出现的任何内容都包含在窗口中,窗口可以为任何尺寸,并且可在屏幕上一次显示多个窗口, 甚至部分或整个窗口在其他窗口的前面也可.我们可以对窗口进行创建.移动.调整大小等操作,也 可以操控任 ...

  7. Linux查看文件总的数据行数，并按行拆分

    先利用 wc -l BLM.txt       读出 BLM.txt 文件一共有多少行. 再 1. 以行数拆分 -l 参数: split –l 50 原始文件 拆分后文件名前缀 例:以50行对文件进行 ...

  8. Go Revel - Testing（测试模块）

    revel提供了一个测试框架来方便的为自己的程序编写功能测试用例. 默认创建的应用骨架附带一个简单的测试用例,这里将它作为起点 ##概览 测试保存在`tests`目录: corp/myapp app/ ...

  9. wpf 模板选择器DataTemplateSelector及动态绑定，DataTemplate.Triggers触发器的使用

    通常,如果有多个 DataTemplate 可用于同一类型的对象,并且您希望根据每个数据对象的属性提供自己的逻辑来选择要应用的 DataTemplate,则应创建 DataTemplateSelect ...

  10. mysql设置对外访问

    报错:Host is not allowed to connect to this MySQL server解决方法 先说说这个错误,其实就是我们的MySQL不允许远程登录,所以远程登录失败了,解决方 ...