轻松上手,快乐学习!
HTML CSS JAVASCRIPT SQL PYTHON MYSQL PHP GIT 问答 工具 导航 更多 实例 参考

HTML DOM images 集合

实例

统计文档中有多少 <img> 元素:

var x = document.images.length;

x 的结果将是:

3
亲自试一试 »

页面下方有更多实例。

定义和用法

images 集合返回文档中所有 <img> 元素的集合。

注释: 集合中的元素按其在源代码中的显示进行排序。

注释: images 集合不会返回 type="image" 的 <input> 元素集合。

提示: 还可查看 Image 对象。

浏览器支持

集合
images Yes Yes Yes Yes Yes

语法

document.images

属性

属性 描述
length 返回集合中 <img> 元素的数量。

注释: 此属性是只读的

方法

方法 描述
[index] 返回集合中指定索引（从 0 开始）对应的 <img> 元素 。

注释: 如果索引号超出范围，则返回 null
item(index) 返回集合中指定索引（从 0 开始）对应的 <img> 元素 。

注释: 如果索引号超出范围，则返回 null
namedItem(id) 返回集合中指定索引 id 对应的 <img> 元素。

注释: 如果 id 不存在，则返回 null

技术细节

DOM 版本: Core Level 1 Document Object
返回值: HTMLCollection 对象，表示文档中的所有 <img> 元素。集合中的元素按其在源代码中的显示进行排序

更多实例

实例

[index]

获取文档中第一个 <img> 元素（索引0）的 URL:

var x = document.images[0].src;

x 的结果将是:

https://www.begtut.com/jsref/klematis.jpg
亲自试一试 »

实例

item(index)

获取文档中第一个 <img> 元素（索引0）的URL:

var x = document.images.item(0).src;

x 的结果将是:

https://www.begtut.com/jsref/klematis.jpg
亲自试一试 »

实例

namedItem(id)

获取文档中 id="myImg" 的 <img> 元素的 URL:

var x = document.images.namedItem("myImg").src;

x 的结果将是:

https://www.begtut.com/jsref/smiley.gif
亲自试一试 »

实例

在文档中的第一个 <img> 元素中添加黑色虚线边框:

document.images[0].style.border = "10px dotted black";
亲自试一试 »

实例

循环浏览文档中的所有 <img> 元素，并输出每个图像的 URL（src）:

var x = document.images;
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
  txt = txt + x[i].src + "<br>";
}

返回的 txt 的结果将是:

https://www.begtut.com/jsref/klematis.jpg
https://www.begtut.com/jsref/klematis2.jpg
https://www.begtut.com/jsref/smiley.gif
亲自试一试 »

相关页面

JavaScript 参考手册: HTML DOM Image 对象

HTML 教程: HTML 图片

HTML 参考手册: HTML <img> 标签

❮ Document 对象