<!DOCTYPE html>

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<body>

    <script>

    function changeImage() {

        element = document.getElementById('myimage');

        if (element.src.match("bulbon")) {

            element.src = "./images/pic_bulboff.gif";

        } else {

            element.src = "./images/pic_bulbon.gif";

        }

    }

    </script>

    <img id="myimage" onclick="changeImage()" border="0" src="./images/pic_bulboff.gif" width="100" height="180">

    <p>点击灯泡 开/关 灯</p>

</body>

</html>

dom操作之开关灯的更多相关文章

  1. 前端基础之BOM与DOM操作

    目录 BOM操作 navigator对象 screen对象 history对象 localtion对象 弹出框 计时 setTimeout() clearTimeout() setInterval() ...

  2. BOM与DOM之DOM操作

    目录 一:DOM操作 1.DOM介绍 2.DOM标准规定HTML文档中的每个成分都是一个节点(node): 3.DOM操作需要用关键字 二:查找标签 1.id查找 类查找 标签查找(直接查找) 2.i ...

  3. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

  4. 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  5. 摆脱DOM操作，从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

  6. 前端页面卡顿？或是DOM操作惹的祸，需优化代码

    文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...

  7. webform（九）——JQuery基础（选择器、事件、DOM操作）

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

  8. HTML 学习笔记 JQuery（DOM 操作）

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

  9. dom操作导致超级卡顿。。。

    var i=0;j=30;setinterval(function(){ document.getElementId(idname).style.top=j+'px'; i<3?i++:i=0; ...

随机推荐

  1. Linq 中的TakeWhile 和 SkipWhile

    这两个概念容易搞混 理解了一番后 在这里写下便于记忆 SkipWhile 可以理解为如果条件满足  就一直跳过   知道不满足后 就取剩下的所有元素(后面的不会再判断) TakeWhile 可以理解为 ...

  2. 使用C++11安全的在线程中控制UI

    本篇文章由:http://www.sollyu.com/using-the-c11-secure-online-process-control-ui/ 说明 首先这里使用的是 Visual Studi ...

  3. 通过 ANE(Adobe Native Extension) 启动Andriod服务 推送消息(四)

    这一节,是要把AS库和Android的jar包及相关配置文件打成一个ane包. 首先先建一个build目录,里面文件目录结构如下: 然后用打开压缩包的方式打开ServiceLib.swc, 把其中的l ...

  4. Qt-获取主机网络信息之QHostInfo

    Qt中提供了几个用于获取主机网络信息的类,包括QHostInfo.QHostAddress.QNetworkInterface以及QNetworkAddress.在本节中,我将在这里总结QHostIn ...

  5. python正则实例

    # -*- coding: cp936 -*-import reidcardregex=r"^[1-9]\d{14}(\d{2}[0-9x])?$"print re.search( ...

  6. Delphi 文字跑马灯

    //跑马灯 procedure Tfr_Main.tme_TitleTimer(Sender: TObject); var strTrim: Widestring; begin strTrim := ...

  7. opengl混合效果

    效果如下图:

  8. 【BZOJ】1053: [HAOI2007]反素数ant

    1053: [HAOI2007]反素数ant Description: g(x)表示x的约数个数,反素数:对于任意的i (i < x),均有g(i) < g(x),则x为反素数:现在输入不 ...

  9. Visual Studio 2010 旗舰版安装图解

    微软发布了最新的 Visual Studio 2010 软件开发编程平台及 .Net Framework 4 框架.这次 VisualStudio 2010 包括 Professional 专业版.P ...

  10. 【ElasticSearch】

    ElasticSearch是基于Lucene开发的分布式搜索框架,包含如下特性: 分布式索引.搜索 索引自动分片.负载均衡 自动发现机器.组建集群 支持Restful 风格接口 配置简单等.