我們的志工尚未將此文章翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
The HTMLImageElement
interface provides special properties and methods for manipulating the layout and presentation of <img>
elements.
Properties
Inherits properties from its parent, HTMLElement
.
HTMLImageElement.align
- Is a
DOMString
indicating the alignment of the image with respect to the surrounding context. HTMLImageElement.alt
- Is a
DOMString
that reflects thealt
HTML attribute, thus indicating fallback context for the image. HTMLImageElement.border
- Is a
DOMString
that is responsible for the width of the border surrounding the image. This is now deprecated and the CSSborder
property should be used instead. HTMLImageElement.complete
Read only- Returns a
Boolean
that istrue
if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has nosrc
value. HTMLImageElement.crossOrigin
- Is a
DOMString
representing the CORS setting for this image element. See CORS settings attributes for further details. HTMLImageElement.currentSrc
Read only- Returns a
DOMString
representing the URL to the currently displayed image (which may change, for example in response to media queries). HTMLImageElement.height
- Is a
unsigned long
that reflects theheight
HTML attribute, indicating the rendered height of the image in CSS pixels. HTMLImageElement.hspace
- Is a
long
representing the space on either side of the image. HTMLImageElement.isMap
- Is a
Boolean
that reflects theismap
HTML attribute, indicating that the image is part of a server-side image map. HTMLImageElement.longDesc
- Is a
DOMString
representing the URI of a long description of the image. HTMLImageElement.lowSrc
- Is a
DOMString
that refers to a low-quality (but faster to load) copy of the image. HTMLImageElement.name
- Is a
DOMString
representing the name of the element. HTMLImageElement.naturalHeight
Read only- Returns a
unsigned long
representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows0
. HTMLImageElement.naturalWidth
Read only- Returns a
unsigned long
representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show0
. HTMLImageElement.referrerPolicy
- Is a
DOMString
that reflects thereferrerpolicy
HTML attribute indicating which referrer to use in order to fetch the image. HTMLImageElement.src
- Is a
DOMString
that reflects thesrc
HTML attribute, containing the full URL of the image including base URI. HTMLImageElement.sizes
- Is a
DOMString
reflecting thesizes
HTML attribute. HTMLImageElement.srcset
- Is a
DOMString
reflecting thesrcset
HTML attribute, containing a list of candidate images, separated by a comma (',', U+002C COMMA
). A candidate image is a URL followed by a'w'
with the width of the images, or an'x'
followed by the pixel density. HTMLImageElement.useMap
- Is a
DOMString
that reflects theusemap
HTML attribute, containing a partial URL of a map element. HTMLImageElement.vspace
- Is a
long
representing the space above and below the image. HTMLImageElement.width
- Is a
unsigned long
that reflects thewidth
HTML attribute, indicating the rendered width of the image in CSS pixels. HTMLImageElement.x
Read only- Returns a
long
representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior. HTMLImageElement.y
Read only- Returns a
long
representing the vertical offset from the nearest layer. This property is also similar to behavior of an old Netscape 4.
Methods
Inherits properties from its parent, HTMLElement
.
Image()
- The
Image()
constructor, taking two optionalunsigned
long
, which are the width and the height of the resource, creates an instance ofHTMLImageElement
, not inserted in a DOM tree.
Example
var img1 = new Image(); // HTML5 Constructor img1.src = 'image1.png'; img1.alt = 'alt'; document.body.appendChild(img1); var img2 = document.createElement('img'); // use DOM HTMLImageElement img2.src = 'image2.jpg'; img2.alt = 'alt text'; document.body.appendChild(img2); // using first image in the document alert(document.images[0].src);
Specifications
Specification | Status | Comment |
---|---|---|
Referrer Policy The definition of 'referrer attribute' in that specification. |
Working Draft | Added the referrerPolicy property. |
CSS Object Model (CSSOM) View Module The definition of 'Extensions to HTMLImageElement' in that specification. |
Working Draft | Added the x and y properties. |
WHATWG HTML Living Standard The definition of 'HTMLImageElement' in that specification. |
Living Standard | The following properties have been added: srcset , currentSrc and sizes . |
HTML5 The definition of 'HTMLImageElement' in that specification. |
Recommendation | A constructor (with 2 optional parameters) has been added. The following properties are now obsolete: name , border , align , hspace , vspace , and longdesc .The following properties are now unsigned long , instead of long : height , and width .The following properties have been added: crossorigin , naturalWidth , naturalHeight , and complete . |
Document Object Model (DOM) Level 2 HTML Specification The definition of 'HTMLImgElement' in that specification. |
Recommendation | The lowSrc property has been removed.The following properties are now long , instead of DOMString : height , width , hspace , and vspace . |
Document Object Model (DOM) Level 1 Specification The definition of 'HTMLImgElement' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
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) | 9 | (Yes) | (Yes) |
complete |
(Yes) | (Yes) | 5[4] | (Yes) | (Yes) |
srcset |
34 | 32 (32)[2] | No support | 21 | 7.1 |
currentSrc |
(Yes) | 32 (32)[2] | No support | (Yes) | No support |
sizes |
(Yes) | 33 (33)[3] | No support | (Yes) | No support |
x and y |
(Yes) | 14[1] | No support | (Yes) | (Yes) |
referrerPolicy |
No support | 50 (50) | No support | No support | No support |
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 |
No support | 32.0 (32)[2] | No support | No support | iOS 8 |
currentSrc |
No support | 32.0 (32)[2] | No support | No support | No support |
sizes |
No support | 33.0 (33)[3] | No support | No support | No support |
x and y |
(Yes) | 14[1] | No support | (Yes) | (Yes) |
referrerPolicy |
No support | 50.0 (50) | No support | No support | No support |
[1] Though, these x
and y
properties were removed in Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) but later, they were restored in Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11) for compatibility reasons.
[2] This feature is behind the dom.image.srcset.enabled
preference, defaulting to false
.
[3] This feature is behind the dom.image.picture.enabled
preference, defaulting to false
.
[4] IE reports false
for broken images.
See also
- The HTML element implementing this interface:
<img>
文件標籤與貢獻者
標籤:
此頁面的貢獻者:
fscholz,
slimsag,
EmileSonneveld,
ccnokes,
PushpitaPikuDey,
venkatbharadwaj,
teoli,
gilly3,
Sebastianz,
fastest963,
DomiR,
realityking,
Zcorpan,
louuis,
phistuck,
Svl,
jaypeagi,
Brettz9,
kirilloid,
kscarfone,
Sheppy,
sethstone,
ethertank,
lcarlson,
trevorh,
jswisher,
JorisW,
Yanmorin
最近更新:
fscholz,