HTMLImageElement
HTMLImageElement
介面提供了特殊的屬性及方法以用來操作 <img>
(en-US) 元素的畫面佈局與外觀呈現。
屬性
Inherits properties from its parent, HTMLElement
.
HTMLImageElement.align
(en-US)- Is a
DOMString
indicating the alignment of the image with respect to the surrounding context. HTMLImageElement.alt
(en-US)- Is a
DOMString
that reflects thealt
(en-US) HTML attribute, thus indicating fallback context for the image. HTMLImageElement.border
(en-US)- 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
(en-US) Read only- Returns a
Boolean
(en-US) that istrue
if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has nosrc
(en-US) value. HTMLImageElement.crossOrigin
(en-US)- Is a
DOMString
representing the CORS setting for this image element. See CORS settings attributes for further details. HTMLImageElement.currentSrc
(en-US) Read only Experimental- Returns a
DOMString
representing the URL to the currently displayed image (which may change, for example in response to media queries). HTMLImageElement.height
(en-US)- 一個反映了 HTML
img
元素之height
(en-US) 屬性的無符號(unsigned
)整數,表示圖片經渲染後的高度(CSS pixels)。 HTMLImageElement.hspace
(en-US)- Is a
long
representing the space on either side of the image. HTMLImageElement.isMap
(en-US)- Is a
Boolean
(en-US) that reflects theismap
(en-US) HTML attribute, indicating that the image is part of a server-side image map. HTMLImageElement.longDesc
(en-US)- 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
(en-US)- Is a
DOMString
representing the name of the element. HTMLImageElement.naturalHeight
(en-US) Read only- 回傳一個代表圖片固有高度(CSS pixels)的無符號(
unsigned
)整數,如果無法取得則回傳0
。 HTMLImageElement.naturalWidth
(en-US) Read only- 回傳一個代表圖片固有寬度(CSS pixels)的無符號(
unsigned
)整數,如果無法取得則回傳0
。 HTMLImageElement.referrerPolicy
(en-US) Experimental- Is a
DOMString
that reflects thereferrerpolicy
(en-US) HTML attribute indicating which referrer to use in order to fetch the image. HTMLImageElement.src
(en-US)- Is a
DOMString
that reflects thesrc
(en-US) HTML attribute, containing the full URL of the image including base URI. HTMLImageElement.sizes
(en-US) Experimental- Is a
DOMString
reflecting thesizes
(en-US) HTML attribute. HTMLImageElement.srcset
(en-US) Experimental- Is a
DOMString
reflecting thesrcset
(en-US) 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
(en-US)- Is a
DOMString
that reflects theusemap
(en-US) HTML attribute, containing a partial URL of a map element. HTMLImageElement.vspace
(en-US)- Is a
long
representing the space above and below the image. HTMLImageElement.width
(en-US)- 一個反映了 HTML
img
元素之width
(en-US) 屬性的無符號(unsigned
)整數,表示圖片經渲染後的寬度(CSS pixels)。 HTMLImageElement.x
(en-US) Read only Experimental- Returns a
long
representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior. HTMLImageElement.y
(en-US) Read only Experimental- Returns a
long
representing the vertical offset from the nearest layer. This property is also similar to behavior of an old Netscape 4.
方法
Inherits properties from its parent, HTMLElement
.
Image()
(en-US)- 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.
Errors
If an error occurs while trying to load or render the image, and an onerror
event handler has been configured to handle the error (en-US)
event, that event handler will get called. This can happen in a number of situations, including:
- The
src
(en-US) attribute is empty ornull
. - 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 (en-US).
範例
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);
規範
Specification | Status | Comment |
---|---|---|
Referrer Policy The definition of 'referrer attribute' in that specification. |
Candidate Recommendation | 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. |
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. |
Obsolete | 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. |
Obsolete | Initial definition. |
瀏覽器相容性
BCD tables only load in the browser
See also
- The HTML element implementing this interface:
<img>
(en-US)