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 Studio 常用快捷键 for mac

    Android Studio 常用快捷键 for mac 查找/查看相关 ⌘O: 全局查找class类名<使用率非常高> ⌘F: 在当前编辑文件中查找<使用率非常高> | 对应 ...

  2. Java对象的内存实际占用

    一.打包和使用方法参考我之前的这篇文章,本文主要是更新了测量的类及方法,实际测试这个方法更准确. https://www.cnblogs.com/yoyotl/p/8421287.html 二.新的测 ...

  3. React Native for Android应用名及图标修改

    应用开发完了,总不能顶着MyProject和小机器人图标就发布了吧?在发布之前,有多处需要修改的地方.今天我们来全面的看一下 应用ID 俗称PackageName,或APP ID.注意,在gradle ...

  4. TitleBar 的那些设置

    设置状态栏透明: View decorView = activity.getWindow().getDecorView(); int option = View.SYSTEM_UI_FLAG_LAYO ...

  5. 如何用javac 和java 编译运行整个Java工程

    转自:http://blog.csdn.net/huagong_adu/article/details/6929817      前言:本文教你怎么用javac和Java命令,以及如何利用脚本(she ...

  6. install ceph by ceph-deploy

    使用阿里云源安装ceph Luminous https://liuxu.co/2017/09/19/install-ceph-Luminous-on-centos7-with-ceph-deploy/ ...

  7. github建库不成功，不能用SVN上传

    说明(2017-12-7 11:37:35): 1. 之前用SVN向gihub提交代码没有一点问题,昨天新建了一个仓库,结果死活提交不上去,以为是SVN的问题,折腾了一天都没弄好. 2. github ...

  8. 分布式系统CAP理论与CA选择

    总结: CAP指的是数据一致性.服务可用性.分区容错性:(这里的一致性指的是强一致性,又叫原子性或线性一致性:可用性指的是所有读写操作都要能终止,没有时延上的要求) 分布式系统中P是必选项:在P必选的 ...

  9. 【转】Windows下charles 使用教程指南

    1.下载就不用再说了,网上好多破解的安装包 2.下面是pc端的抓包使用情况 Charles支持抓去http.https协议的请求,不支持socket.然后charles会自动配置IE浏览器和工具的代理 ...

  10. AutoIt 软件自动化操作

    AutoIt 目前最新是v3版本,这是一个使用类似BASIC脚本语言的免费软件,它设计用于Windows GUI(图形用户界面)中进行自动化操作. 它利用模拟键盘按键,鼠标移动和窗口/控件的组合来实现 ...