这篇翻译不完整。请帮忙从英语翻译这篇文章

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);

规范

Specification Status Comment
CSS Object Model (CSSOM) View Module
Extensions to HTMLImageElement
Working Draft 添加 xy 属性.
HTML Living Standard
HTMLImageElement
Living Standard 以下属性被添加了: srcset, currentSrcsizes.
HTML5
HTMLImageElement
Recommendation 一个构造器 (带有2 个可选的参数) 已经被添加.
以下属性现在被弃用了: name, border, align, hspace, vspace, 和 longdesc.
以下属性现在是 unsigned long, 类型了,而不是long类型了: height, 和 width.
T以下属性现在被添加了: crossorigin, naturalWidth, naturalHeight, 和complete.
Document Object Model (DOM) Level 2 HTML Specification
HTMLImgElement
Obsolete The lowSrc 属性已经被移除了.
以下属性现在是long类型了, 而不是DOMString类型了: height, width, hspace, and vspace.
Document Object Model (DOM) Level 1 Specification
HTMLImgElement
Obsolete 初始定义.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
lowSrc (Yes) (Yes) ? (Yes) (Yes)
naturalWidth, naturalHeight (Yes) (Yes) 9 (Yes) (Yes)
crossorigin (Yes) (Yes) ? (Yes) (Yes)
complete (Yes) (Yes) 5 (Yes) (Yes)
srcset 34 32 (32) behind the dom.image.srcset.enabled pref, default to pref off. 未实现 21 7.1
currentSrc (Yes) 32 (32) behind the dom.image.srcset.enabled pref, default to pref off. 未实现 (Yes) 未实现
sizes (Yes) 33 (33) behind the dom.image.picture.enabled pref, default to pref off. 未实现 (Yes) 未实现
x and y (Yes) 14 [1] 未实现 (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.0) (Yes) (Yes) (Yes)
lowSrc ? ? ? ? ?
naturalWidth, naturalHeight ? ? 9 ? (Yes)
crossorigin ? (Yes) ? ? (Yes)
complete ? (Yes) ? ? (Yes)
srcset 未实现 32.0 (32) behind the dom.image.srcset.enabled pref, default to pref off. 未实现 未实现 iOS 8
currentSrc 未实现 32.0 (32) behind the dom.image.srcset.enabled pref, default to pref off. 未实现 未实现 未实现
sizes 未实现 33.0 (33) behind the dom.image.picture.enabled pref, default to pref off. 未实现 未实现 未实现
x and y (Yes) 14 [1] 未实现 (Yes) (Yes)

[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>

文档标签和贡献者

 此页面的贡献者: aimiy, zhenhua32
 最后编辑者: aimiy,