La interfaz HTMLImageElement
provee de propiedas especiales y métodos (más allá de las interfaces HTMLElement
, también tiene disponible la herencia) para manipular el diseño y la presentación de elementos <img>
.
Propiedades
Heredadas de su padre, HTMLElement
.
HTMLImageElement.align
- Es un
DOMString
que indica el alineamiento de la imagen respecto al contexto que la rodea. HTMLImageElement.alt
- Es un
DOMString
que refleja el atributo HTMLalt
, indicando texto de respaldo a la imagen. HTMLImageElement.border
- Es un
DOMString
que indica el ancho del borde alrededor de la imagen. Este está desaprobado y debe usarse la propiedad CSSborder
en su lugar. HTMLImageElement.complete
Read only- Devuelve un
Boolean
que estrue
si el navegador ha terminado de buscar la imagen, sea o no exitoso. También devuelvetrue
si la imagen no tiene valorsrc
. HTMLImageElement.crossOrigin
- Es un
DOMString
representa la configuración CORS para el elemento imagen. Ver Atributos de configuración CORS para más detalles. HTMLImageElement.currentSrc
Read only- Devuelve un
DOMString
HTMLImageElement.height
- Es un
unsigned long
que refleja el atributo HTMLheight
, indica el alto de la imagen en píxeles CSS. HTMLImageElement.hspace
- Es un
long
que representa el espacio a izquierda y derecha de la imagen. HTMLImageElement.isMap
- Es un
Boolean
que refleja el atributo HTMLismap
, indica que la imagen es parte del mapa de imagen del lado del servidor. HTMLImageElement.longDesc
- Es un
DOMString
que representa la URI de una larga descripción de la imagen. HTMLImageElement.lowSrc
- Es un
DOMString
que referencia una copia de la imagen en mala calidad (pero más rápida cargando) HTMLImageElement.name
- Es un
DOMString
. HTMLImageElement.naturalHeight
Read only- Devuelve un
unsigned long
que representa el alto intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0. HTMLImageElement.naturalWidth
Read only- Devuelve un
unsigned long
que representa el ancho intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0. HTMLImageElement.referrerPolicy
- Es un
DOMString
que refleja el atributo HTMLreferrerpolicy
indica la referencia a usar para buscar la imagen. HTMLImageElement.src
- Es un
DOMString
que refleja el atributo HTMLsrc
HTML attribute, contiene la URL completa de la imagen, incluido la base del URI HTMLImageElement.sizes
- Es un
DOMString
HTMLImageElement.srcset
- Es un
DOMString
que refleja el atributo HTMLsrcset
, contiene una ista de imágenes candidatas, separadas por una coma (',', U+002C COMMA
). Una imagen candidata es una URL seguida por'w'
con el ancho, o una'x'
seguida de la densidad del píxel. HTMLImageElement.useMap
- Es un
DOMString
que refleja el atributo HTMLusemap
, contiene una URL parcial del mapa del elemento. HTMLImageElement.vspace
- Es un
long
que representa el espacio sobre y bajo la imagen. HTMLImageElement.width
- Es un
unsigned long
que refleja el atributo HTMLwidth
, indica el ancho de la imagen en píxeles CSS. HTMLImageElement.x
Read only- Devuelve un
long
que representa el hueco horizontal hasta la capa más cercana. Esta propiedad copia el comportamiento de Netscape 4. HTMLImageElement.y
Read only- Devuelve un
long
que representa el hueco vertical hasta la capa más cercana. Esta propiedad copia el comportamiento de Netscape 4.
Métodos
Heredados de su padre, HTMLElement
.
Image()
- El constructor
Image()
, toma dosunsigned long
opcionales, ancho y alto del recurso, crea una instacia de createsHTMLImageElement
no insertada en el árbol DOM.
Ejemplo
var img1 = new Image(); // HTML5 Constructor
img1.src = 'image1.png';
img1.alt = 'alt';
document.body.appendChild(img1);
var img2 = document.createElement('img'); // Uso DOM HTMLImageElement
img2.src = 'image2.jpg';
img2.alt = 'alt text';
document.body.appendChild(img2);
// Usando la primera imagen en el documento
alert(document.images[0].src);
Especificiaciones
Especicifación | Estado | Comentario |
---|---|---|
Referrer Policy La definición de 'referrer attribute' en esta especificación. |
Candidate Recommendation | Añadida la propiedad referrerPolicy . |
CSS Object Model (CSSOM) View Module La definición de 'Extensions to HTMLImageElement' en esta especificación. |
Working Draft | Añadidas propiedades x e y |
HTML Living Standard La definición de 'HTMLImageElement' en esta especificación. |
Living Standard | Las siguientes propiedades han sido añadidas: srcset , currentSrc y sizes . |
HTML5 La definición de 'HTMLImageElement' en esta especificación. |
Recommendation | Un constructor (con 2 parámetros opcionales) añadido. Las siguientes propiedades quedaron obsoletas: name , border , align , hspace , vspace , y longdesc . Las siguientes propiedades son ahora unsigned long , en lugar de long : height , y width.Las siguientes propiedades fueron añadidas: crossorigin , naturalWidth , naturalHeight , y complete . |
Document Object Model (DOM) Level 2 HTML Specification La definición de 'HTMLImgElement' en esta especificación. |
Obsolete | La propiedad lowSrc fue eliminada.Las siguientes propiedades son ahora long , en lugar de DOMString : height , width , hspace , y vspace . |
Document Object Model (DOM) Level 1 Specification La definición de 'HTMLImgElement' en esta especificación. |
Obsolete | Definición inicial. |
Compatibilidad con navegador
Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Soporte básico | (Yes) | 1.0 (1.7 o anterior) | (Yes) | (Yes) | (Yes) |
lowSrc |
(Yes) | (Yes) | ? | (Yes) | (Yes) |
naturalWidth , naturalHeight |
(Yes) | (Yes) | 9 | (Yes) | (Yes) |
crossorigin |
(Yes) | (Yes) | ? | (Yes) | (Yes) |
complete |
(Yes) | (Yes) | 5[4] | (Yes) | (Yes) |
srcset |
34 | 32 (32)[2] | Sin soporte | 21 | 7.1 |
currentSrc |
(Yes) | 32 (32)[2] | Sin soporte | (Yes) | Sin soporte |
sizes |
(Yes) | 33 (33)[3] | Sin soporte | (Yes) | Sin soporte |
x e y |
(Yes) | 14[1] | Sin soporte | (Yes) | (Yes) |
referrerPolicy |
Sin soporte | 42 (42) [5] | Sin soporte | Sin soporte | Sin soporte |
Característica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Soporte básico | (Yes) | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
lowSrc |
? | ? | ? | ? | ? |
naturalWidth , naturalHeight |
? | ? | 9 | ? | (Yes) |
crossorigin |
? | (Yes) | ? | ? | (Yes) |
complete |
? | (Yes) | ? | ? | (Yes) |
srcset |
Sin soporte | 32.0 (32)[2] | Sin soporte | Sin soporte | iOS 8 |
currentSrc |
Sin soporte | 32.0 (32)[2] | Sin soporte | Sin soporte | Sin soporte |
sizes |
Sin soporte | 33.0 (33)[3] | Sin soporte | Sin soporte | Sin soporte |
x e y |
(Yes) | 14[1] | Sin soporte | (Yes) | (Yes) |
referrerPolicy |
Sin soporte | 42.0 (42) [5] | Sin soporte | Sin soporte | Sin soporte |
[1] Las propiedades x
e y
fueron eliminadas en Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) pero reestablecidas en Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11) por razones de compatibilidad.
[2] Esta característica está detras de la preferencia dom.image.srcset.enabled
, por defecto false
.
[3] Esta característica está detras de la preferencia dom.image.picture.enabled
, por defecto false
.
[4] IE reporta false
para imágenes rotas.
[5] Esta propiedad fue nombrada referrer
desde Firefox 42 a 44.
Ver también
- El elemento HTML implementa esta interfaz:
<img>