We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Интерфейс HTMLImageElement  предоставляет специальные свойства и методы  (расширяя обычный интерфейс HTMLElement  ) для управления версткой и отображением элемента <img>.

Свойства

Наследует свойства родителя, HTMLElement.

Имя Тип Описание
align  DOMString Указывает расположение картинки зависящее от окружающего контента.
alt DOMString Повторяет аттрибут HTML alt указывающий на запасной контекст картинки.
border  DOMString Ширина рамки вокруг картинки.
complete Только для чтения Boolean Возвращает true, если браузер закончил загрузку картинки с ошибкой или успешно. Также возвращает true, когда не установлено значение  src, false во всех остальных случаях.
crossOrigin DOMString The CORS setting for this image element. See CORS settings attributes for details.
height unsigned long Reflects the height HTML attribute, indicating the rendered height of the image in CSS pixels.
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 optional unsigned long, the width and the height of the resource, creates an instance of HTMLImageElement not 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.

Совместимость

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Свойство 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.

См. также

  • The HTML element implementing this interface: <img>

Метки документа и участники

Внесли вклад в эту страницу: jeetiss, fil7, khalid32, Norville, eicto, SEREGA_CHEREP
Обновлялась последний раз: jeetiss,