HTMLImageElement

The HTMLImageElement 接口提供了特别的属性和方法 (在常规的 HTMLElement之外,它也能通过继承使用)来操纵 <img> 元素的布局和图像.

属性

从它的父亲元素上继承的属性, HTMLElement.

HTMLImageElement.align

是一个 DOMString 表明图像如何对齐它周围的内容.

HTMLImageElement.alt

是一个 DOMString 反映了 alt HTML 属性, 表明图像的 fallback content.

HTMLImageElement.border

是一个 DOMString 给定了图像边框的宽度. 这个属性已经被弃用了,应该用 CSS border 属性来代替它.

HTMLImageElement.complete 只读

返回一个 Boolean 如果浏览器已经取出图像则返回true, 并且它是一个 supported image type,图像解码的过程中没有错误.

HTMLImageElement.crossOrigin

是一个 DOMString 表示这个img元素的 CORS 设置 . 参考 CORS settings attributes.

HTMLImageElement.currentSrc 只读

返回一个 DOMString

HTMLImageElement.height

I是一个 unsigned long类型 反映了 height HTML属性, 说明了图像在CSS像素中渲染的高度.

HTMLImageElement.hspace

是一个 long类型 表明图像左边和右边的空间.

HTMLImageElement.isMap

是一个 Boolean 反映了ismap HTML属性, 说明了图像是某个服务器端图像映射的一部分.

HTMLImageElement.longDesc

是一个 DOMString 表明了图像的长描述的URI.

HTMLImageElement.lowSrc

是一个 DOMString 表明了对图像的一个低质量(但能快速载入)的备份的引用.

HTMLImageElement.name

是一个 DOMString

HTMLImageElement.naturalHeight 只读

返回一个 unsigned long 类型,表明图像在CSS像素中固有的高度, 如果可用的话; 否则, 返回0.

HTMLImageElement.naturalWidth 只读

返回一个 unsigned long 类型,表明图像在CSS像素中固有的宽度,如果可用的话; 否则, 返回0.

HTMLImageElement.src

是一个 DOMString 反映了 src HTML 属性, 包含图像的完整的 URL,包含图像的基础URL.

HTMLImageElement.sizes

是一个 DOMString

HTMLImageElement.srcset

是一个 DOMString 反映了 srcset HTML 属性, 包含了候选的图像的列表, 用逗号分隔 (',', U+002C COMMA). 一个候选的图像是一个URL 跟着一个 'w' 表示图像的宽度, 或者一个 'x' 表示像素密度.

HTMLImageElement.useMap

是一个 DOMString 反映了 usemap HTML 属性, 包含一个map元素的局部URL.

HTMLImageElement.vspace

是一个 long 类型表示图像上面和下面的空间.

HTMLImageElement.width

是一个 unsigned long 类型反映了 width HTML 属性, 说明图像在CSS像素中渲染的宽度.

HTMLImageElement.x 只读

返回一个 long 类型表示图像相对于最近嵌套的布局的水平偏移量. 这个属性模拟了 Netscape 4浏览器的 一个老的行为.

HTMLImageElement.y 只读

返回一个 long 类型表示图像相对于最近嵌套的布局的垂直偏移量. 这个属性模拟了 Netscape 4 浏览器的一个老的行为.

方法

从它的父亲元素上继承的方法,, HTMLElement.

Image()

Image() 构造器, 带有两个可选的 unsigned long类型参数, 表示资源的宽度和高度, 创建了一个 HTMLImageElement 的实例, 但未把它插入DOM 树中.

错误

If an error occurs while trying to load or render the image, and an onerror event handler has been configured to handle the error event, that event handler will get called. This can happen in a number of situations, including:

The src attribute is empty or null. The specified src URL is the same as the URL of the page the user is currently on. The specified image is corrupted in some way that prevents it from being loaded. The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <img> element's attributes. The specified image is in a format not supported by the user agent.

例子

var img1 = new Image(); // HTML5 构造器
img1.src = 'image1.png';
img1.alt = 'alt';
document.body.appendChild(img1);
var img2 = document.createElement('img'); // 使用 DOM HTMLImageElement
img2.src = 'image2.jpg';
img2.alt = 'alt text';
document.body.appendChild(img2);
// 使用文档中的第一个img
alert(document.images[0].src);

规范

浏览器兼容性

[1] The x and y properties were removed in Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) but restored in Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11) for compatibility reasons.

See also

• 实现了这个接口的HTML 元素 : <img>