最新的Web开发教程
 

HTML DOM图像采集

<文档对象

看看有多少<img>元素有文件中:

var x = document.images.length;

x的结果将是:

3
试一试»

更多"Try it Yourself"下面的例子。


定义和用法

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

Note:因为它们出现在源代码的集合中的元素进行排序。

注意:图像集合不返回的集合<input>类型为“图像”的元素。

提示:也看图像对象


浏览器支持

采集
images

句法

document.images

属性

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

注:该属性为只读

方法

方法 描述
[ index ] 返回<img>从与指定的索引的集合元素(starts at 0)

注:如果索引数量超出范围,则返回null
item( index ) 返回<img>从与指定的索引的集合元素(starts at 0)

注:如果索引数量超出范围,则返回null
namedItem( id ) 返回<img>从与指定ID的集合元素。

注:如果ID不存在,则返回null

技术细节

DOM版本: 核心1级文档对象
返回值: 的HTMLCollection对象,代表所有<img>的文档中的元素。 当它们出现在源代码的集合中的元素进行排序

例子

更多示例

[ 索引 ]

得到的第一个的URL <img>元素(index 0)的文档中:

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

x的结果将是:

http://www.w3ii.com/jsref/klematis.jpg
试一试»

item( index )

得到的第一个的URL <img>元素(index 0)的文档中:

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

x的结果将是:

http://www.w3ii.com/jsref/klematis.jpg
试一试»

namedItem( id )

获取的URL <img>与所述文档中的id =“myImg”元素:

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

x的结果将是:

http://www.w3ii.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的结果将是:

http://www.w3ii.com/jsref/klematis.jpg
http://www.w3ii.com/jsref/klematis2.jpg
http://www.w3ii.com/jsref/smiley.gif
试一试»

相关页面

JavaScript的参考: HTML DOM图像对象

HTML教程: HTML图片

HTML参考: HTML <img>标记


<文档对象