<!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. C++ DLL 获取 MSI Property

    VS2010 创建  C++, Win32 DLL工程C-TEST. Stdafx.h中,在<windows.h>之后 添加引用. #include <msi.h> #incl ...

  2. 学习redis-安装和基本一些命令

    redis安装 linux下环境安装redis,我这里下载的是3.0.0版本(目前最新版3.2.0). $ wget http://download.redis.io/releases/redis-3 ...

  3. 使用Notepad++将多行数据合并成一行

    1.按Ctrl+F,弹出“替换”的窗口: 2.选择“替换”菜单: 3.“查找目标”内容输入为:\r\n: 4.“替换为”内容为空: 5.“查找模式”选择为正则表达式: 6.设置好之后,点击“全部替换” ...

  4. 51nod贪心算法入门-----活动安排问题

    有若干个活动,第i个开始时间和结束时间是[Si,fi),只有一个教室,活动之间不能交叠,求最多安排多少个活动? 输入 第1行:1个数N,线段的数量(2 <= N <= 10000) 第2 ...

  5. 使用ECLIPSE+MINGW搭建C/C++开发环境

    有个朋友要我帮忙跑一个C程序而我现在主要用java,电脑上也就没有C语言的编译和开发环境,在学习java的这段期间,接触到了Eclipse这个强大的IDE,用惯了.就为调试一个程序,去安装一个VS觉得 ...

  6. 【python】迭代一列 斐波那契数列

    def fabm(n): if n < 1: print('输入不能小于1') return -1 if n == 1 or n == 2: return 1 else: return fabm ...

  7. NodeJS+Express+Socket.io的一个简单例子

    关键字:NodeJS,Express,Socket.io. OS:Windows 8.1 with update pro. 1.安装NodeJS:http://nodejs.org/. 2.初始化一个 ...

  8. 5.MVC框架开发（强类型开发，控制器向界面传递数据的几种方法）

    界面表单中的表单元素名字和数据库表的字段名相一一映射(需要哪个表的数据就是那个表的模型(Model)) 在View页面中可以指定页面从属于哪个模型 注:以上的关系可以通过MVC的强类型视图开发来解决我 ...

  9. js add media query

    var msViewportStyle = document.createElement("style"); msViewportStyle.appendChild( docume ...

  10. 使用Yeoman搭建 AngularJS 应用 (2) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/index.html 使用Yeoman搭建简单的应用 今天将会搭建一个简单的网页程序.你将可以添加,删除,拖拽和保存. 浏览Yeoman Y ...