Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
Интерфейс HTMLImageElement предоставляет специальные свойства и методы (расширяя обычный интерфейс HTMLElement ) для управления вёрсткой и отображением элемента <img>.
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ru/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ru/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ru/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ru/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ru/docs/Web/API/HTMLImageElement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLImageElement</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
Свойства
Наследует свойства родителя, HTMLElement.
| Имя | Тип | Описание |
|---|---|---|
align |
DOMString |
Указывает расположение картинки зависящее от окружающего контента. Возможные значения: "left", "right", "justify", и "center". |
alt |
DOMString |
Повторяет аттрибут HTML alt указывающий на запасной контекст картинки. |
border |
DOMString |
Ширина рамки вокруг картинки. Устарело и вместо него следует использовать свойство CSS border. |
complete Только для чтения |
Boolean |
Возвращает true, если браузер закончил загрузку картинки с ошибкой или успешно. Также возвращает true, когда не установлено значение src, во всех остальных случаях - false. |
crossOrigin |
DOMString |
Является DOMString, с настройками CORS для этого элемента изображения. Дополнительная информация: Атрибуты настроек CORS. |
currentSrcТолько для чтения |
DOMString |
Возвращает DOMString с URL-адресом текущего изображения (что может измениться, например, в ответ на запросы мультимедиа). |
height |
unsigned long |
Отражает атрибут height HTML, указывая визуализированную высоту изображения в пикселях CSS. |
hspace |
long |
Space to the left and right of the image. |
isMap |
Boolean |
Reflects the ismap HTML attribute, indicating that the image is part of a server-side image map. |
longDesc |
DOMString |
URI of a long description of the image. |
lowSrc |
DOMString |
A reference to a low-quality (but faster to load) copy of the image. |
name |
DOMString |
|
naturalHeight Только для чтения |
unsigned long |
Intrinsic height of the image in CSS pixels, if it is available; otherwise, 0. |
naturalWidth Только для чтения |
unsigned long |
Intrinsic width of the image in CSS pixels, if it is available; otherwise, 0. |
src |
DOMString |
Reflects the src HTML attribute, containing the URL of the image. |
srcset |
||
useMap |
DOMString |
Reflects the usemap HTML attribute, containing a partial URL of a map element. |
vspace |
long |
Space above and below the image. |
width |
unsigned long |
Reflects the width HTML attribute, indicating the rendered width of the image in CSS pixels. |
x Только для чтения |
long |
The horizontal offset from the nearest layer. (Mimic an old Netscape 4 behavior) |
y Только для чтения |
long |
The vertical offset from the nearest layer. (Mimic an old Netscape 4 behavior) |
Методы
Наследует методы родителя, HTMLElement.
HTMLImageElement.Image()- The
Image()constructor, taking two optionalunsignedlong, the width and the height of the resource, creates an instance ofHTMLImageElementnot inserted in a DOM tree.
Пример
var img1 = new Image(); // Конструктор HTML5
img1.src = 'image1.png';
img1.alt = 'alt';
document.body.appendChild(img1);
var img2 = document.createElement('img'); // Используем HTMLImageElement
img2.src = 'image2.jpg';
img2.alt = 'alt text';
document.body.appendChild(img2);
// выбираем первое изображение на странице
alert(document.images[0].src);
Спецификации
| Спецификация | Статус | Комментарий |
|---|---|---|
| HTML Living Standard Определение 'HTMLAnchorElement' в этой спецификации. |
Живой стандарт | The following property has been added: srcset. |
| HTML5 Определение 'HTMLAnchorElement' в этой спецификации. |
Рекомендация | 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 Определение 'HTMLImgElement' в этой спецификации. |
Устаревшая | 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 Определение 'HTMLImgElement' в этой спецификации. |
Устаревшая | Initial definition. |
Совместимость
| Свойство | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Общая поддержка | (Да) | 1.0 (1.7 или ранее) | (Да) | (Да) | (Да) |
lowSrc |
? | ? | ? | ? | ? |
naturalWidth, naturalHeight |
? | ? | ? | ? | ? |
crossorigin |
? | (Да) | ? | ? | ? |
complete |
? | ? | ? | ? | ? |
srcset |
Нет | Нет | Нет | Нет | Нет |
x and y |
(Да) | (Да) [1] | Нет | (Да) | (Да) |
| Свойство | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Общая поддержка | (Да) | 1.0 (1.0) | (Да) | (Да) | (Да) |
lowSrc |
? | ? | ? | ? | ? |
naturalWidth, naturalHeight |
? | ? | ? | ? | ? |
crossorigin |
? | (Да) | ? | ? | ? |
complete |
? | ? | ? | ? | ? |
srcset |
Нет | Нет | Нет | Нет | Нет |
x and y |
(Да) | (Да) [1] | Нет | (Да) | (Да) |
[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.
См. также
- Элемент HTML, реализующий этот интерфейс:
<img>