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 (en-US) for further details. HTMLImageElement.currentSrc
(en-US) 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
(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) 實驗性質-
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) 實驗性質-
Is a
DOMString
reflecting thesizes
(en-US) HTML attribute. HTMLImageElement.srcset
(en-US) 實驗性質-
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 實驗性質-
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 實驗性質-
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 |
---|
HTML Standard # htmlimageelement |
瀏覽器相容性
BCD tables only load in the browser
See also
- The HTML element implementing this interface:
<img>
(en-US)