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. 【Android】详解Android Service

    目录结构: contents structure [+] Service简单概述 Service在清单文件中的声明 Service启动服务 Service绑定服务 扩展Binder类 使用Messen ...

  2. Atitit 项目文档规范化与必备文档与推荐文档列表

    Atitit 项目文档规范化与必备文档与推荐文档列表 ===========比较重要的必备文档========== 项目组名单通讯录( 包括项目组,客户沟通人等 需求文档 原型ui文档 开发计划表 项 ...

  3. 【Unity笔记】打包安卓APK时Build Setting中的三种Build System

    Internal(Default):Unity内置,仅需Android SDK支持.不能导出工程,适用于仅适用Unity开发的工程. Gradle(New):使用Gradle进行构建,需要Androi ...

  4. SpringBatch的流程简介

    SpringBatch的流程图如下: 每个Batch都会包含一个Job.Job就像一个容器,这个容器装了若干Step,Batch中实际干活的也就是这些Step,至于Step干什么活,无外乎读取数据,处 ...

  5. duilib进阶教程 -- 图片和文字的位置调整 (5)

    已经有8个晚上没写教程啦,因为之后遇到了一些问题,主要是TreeView控件的问题,这个问题搞了几个晚上,然后还需要调试代码才能知道它的用法,虽然能够调试出来,但毕竟没什么含金量,只是重复劳动而已,相 ...

  6. [Tensorflow] Object Detection API - prepare your training data

    From: TensorFlow Object Detection API This chapter help you to train your own model to identify obje ...

  7. [PHP] 09 - PHP 7 & Tricky

    新特征列表: 序号 内容 1 PHP 标量类型与返回值类型声明 2 PHP NULL 合并运算符 3 PHP 太空船运算符(组合比较符) 4 PHP 常量数组 5 PHP 匿名类 6 PHP Clos ...

  8. Bitmap（三）

    转自:http://www.open-open.com/lib//view/open1333418945202.html Bitmap是Android系统中的图像处理的最重要类之一.用它可以获取图像文 ...

  9. 还不错的MUI技术文档

    https://blog.csdn.net/xin724/article/details/81939176

  10. 查找C++代码中某一范围内的内存泄露

    #include <string.h> #define _CRTDBG_MAP_ALLOC #include <crtdbg.h> int _tmain(int argc, _ ...