您会经常看到 document.getElementById(" some id ") 。这个方法是 HTML DOM 中定义的。

DOM ( D ocument O bject M odel)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

您将在本教程的多个章节中学到有关 HTML DOM 的知识。

JavaScript：改变 HTML 图像

本例会动态地改变 HTML <image> 的来源（src）：

点击以下灯泡查看效果：

点击灯泡就可以打开或关闭这盏灯

以上实例中代码 element.src.match("bulbon") 的作用意思是：检索 <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon ，图片 src 更新为 bulboff.gif ，若匹配不到 bulbon 字符串， src 则更新为 bulbon.gif

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

JavaScript：改变 HTML 样式

改变 HTML 元素的样式，属于改变 HTML 属性的变种。

JavaScript：验证输入

JavaScript 常用于验证用户的输入。

if isNaN ( x ) { alert ( " 不是数字 " ) ;
尝试一下 »

if ( isNaN ( x ) || x . replace ( / ( ^\ s * ) | ( \ s *$ ) / g , " " ) == " " ) { alert ( " 不是数字 " ) ;
尝试一下 »

您知道吗？

JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。
Java（由 Sun 发明）是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

ECMAScript 版本

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

ECMAScript 1第一个版本 ECMAScript 2版本变更 ECMAScript 3添加正则表达式
添加 try/catch ECMAScript 4没有发布 ECMAScript 5添加 "strict mode"，严格模式
添加 JSON 支持 ECMAScript 5.1版本变更 ECMAScript 6添加类和模块 ECMAScript 7增加指数运算符 (**)
增加 Array.prototype.includes

function changeImage(){
    var s = document.getElementById('myimage');
    s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}

尝试一下 »

ZYiDa

ZYiDa

468***[email protected]

5年前 (2018-07-27)

#0

千羽

488***[email protected]

2393

我让楼上的更简洁：

<script>
function changeImage(s){
    s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
</script>
<img id="myimage" onclick="changeImage(this)" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

千羽

千羽

488***[email protected]

5年前 (2019-02-26)

#0

IT攻城狮

sof***[email protected]

482

还有比我更简洁的吗:

<img id="myimage" onclick="~function(e){e.src=e.src.match('bulboff')?'/images/pic_bulbon.gif':'/images/pic_bulboff.gif'}(this)" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

IT攻城狮

IT攻城狮

sof***[email protected]

3年前 (2020-09-05)

#0

StarCat

xin***[email protected]

32

接楼上@IT攻城狮。

在这段代码中，~function(e){...}(this) 表示使用了一个 自执行的匿名函数（Immediately Invoked Function Expression，IIFE） 。这个匿名函数接收一个参数 e ，表示当前被点击的图片元素，然后对这个元素的 src 属性进行修改，实现灯泡的打开和关闭。

具体来说，当用户点击图片时， onclick 事件会触发，并将当前的图片元素作为参数传递给匿名函数。匿名函数中的代码会通过正则表达式判断当前图片的路径中是否包含 bulboff ，如果包含，则将路径修改为 /images/pic_bulbon.gif ，否则将路径修改为 /images/pic_bulboff.gif 。这样就实现了灯泡的打开和关闭，用户可以通过点击图片来切换灯泡的状态。

需要注意的是，~function(e){...}(this) 中的波浪线 ~ 并不是必须的，它的作用是将匿名函数转换为一个表达式，从而避免将 function 关键字视为一个语句而出现语法错误。因此，这个波浪线可以省略，代码也可以写成 (function(e){...})(this) 的形式，效果是一样的。

StarCat

StarCat

xin***[email protected]

4个月前 (05-23)

• HTML / CSS
  • HTML 教程
  • HTML5 教程
  • CSS 教程
  • CSS3 教程
  • Bootstrap3 教程
  • Bootstrap4 教程
  • Bootstrap5 教程
  • Font Awesome 教程
  • Foundation 教程
• JavaScript
  • JavaScript 教程
  • HTML DOM 教程
  • jQuery 教程
  • AngularJS 教程
  • AngularJS2 教程
  • Vue.js 教程
  • Vue3 教程
  • React 教程
  • TypeScript 教程
  • jQuery UI 教程
  • jQuery EasyUI 教程
  • Node.js 教程
  • AJAX 教程
  • JSON 教程
  • Echarts 教程
  • Chart.js 教程
  • Highcharts 教程
  • Google 地图 教程
• 服务端
  • Python 教程
  • Python2.x 教程
  • Linux 教程
  • Docker 教程
  • Ruby 教程
  • Java 教程
  • C 教程
  • C++ 教程
  • Perl 教程
  • Servlet 教程
  • JSP 教程
  • Lua 教程
  • Rust 教程
  • Scala 教程
  • Go 教程
  • PHP 教程
  • 数据结构与算法
  • Django 教程
  • Zookeeper 教程
  • 设计模式
  • 正则表达式
  • Maven 教程
  • Verilog 教程
  • ASP 教程
  • AppML 教程
  • VBScript 教程
• 数据库
  • SQL 教程
  • MySQL 教程
  • PostgreSQL 教程
  • SQLite 教程
  • MongoDB 教程
  • Redis 教程
  • Memcached 教程
• 数据分析
  • Python 教程
  • NumPy 教程
  • Pandas 教程
  • Matplotlib 教程
  • Scipy 教程
  • R 教程
  • Julia 教程
• 移动端
  • Android 教程
  • Swift 教程
  • jQuery Mobile 教程
  • ionic 教程
  • Kotlin 教程
• XML 教程
  • XML 教程
  • DTD 教程
  • XML DOM 教程
  • XSLT 教程
  • XPath 教程
  • XQuery 教程
  • XLink 教程
  • XPointer 教程
  • XML Schema 教程
  • XSL-FO 教程
  • SVG 教程
• ASP.NET
  • ASP.NET 教程
  • C# 教程
  • Web Pages 教程
  • Razor 教程
  • MVC 教程
  • Web Forms 教程
• Web Service
  • Web Service 教程
  • WSDL 教程
  • SOAP 教程
  • RSS 教程
  • RDF 教程
• 开发工具
  • Eclipse 教程
  • Git 教程
  • Svn 教程
  • Markdown 教程
• 网站建设
  • HTTP 教程
  • 网站建设指南
  • 浏览器信息
  • 网站主机教程
  • TCP/IP 教程
  • W3C 教程
  • 网站品质