備忘録的プログラミングリファレンス

HTMLImageElement インターフェイス

 HTMLImageElement インターフェイスは、画像を web ページに取り込むための <img> エレメントを定義したインターフェイスです。
 このインターフェイスでプロパティメソッドイベントを定義しています。

HTMLImageElement 継承図

 扱える画像は、JPG、GIF、PNG、APNG、AVIF、SVG、WebP形式です。

ページ内 Index

- ad -

プロパティ(Properties)

 HTMLImageElement インターフェイスは 以下の独自のプロパティをもちます。HTMLElement インターフェイス のプロパティも継承しています。

プロパティ概要分類
.alt画像が読み込まれなかった場合の代替えテキストの設定と取得。DOMString 型
.complete画像の読み込みが完了したか/否か。ただし判定に条件がある。Boolean 型
.crossOriginJavaScript の XMLHttpRequest を使用してリクエストをする際の CORS の設定を指定
.currentSrc現在表示されている画像の URL。USVString 型
.decodingデータを画像として表示する方法(デコード方法)を指定。 DOMString 型
.fetchPriority画像の取得の優先度を指定
.height画像のレンダリング時の高さ。unsigned long 型
.isMapイメージマップ <map> を利用するか/否か。boolean 型。
.loading画像を読み込むタイミングを設定。 DOMStringt 型
.naturalHeight実際の画像の高さ。unsigned long 型
.naturalWidth実際の画像の幅。unsigned long 型
.referrerPolicy画像を取得するためのリファラーを設定。DOMString 型
.sizesカンマ区切りのサイズ設定。 DOMString 型
.src画像ソースのURL。USVStringg 型
.srcset条件による読み込む画像ソースのURLを設定。USVStringg 型
.useMap<img> からイメージマップ <map> を指定する。<map> の name 属性の値に # を付ける。DOMString 型
.width画像のレンダリング時の幅。unsigned long 型
.x画像のレンダリングし始める位置、x座標。
.y画像のレンダリングし始める位置、y座標。

 以下は、HTMLElement インターフェイスのプロパティと継承したプロパティです。参考にしてください。

Nodeのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

Elementのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

メソッド(Methods)

 HTMLImageElement インターフェイスは 以下の独自のメソッドがあります。

メソッド概要分類
.decode()画像が利用できるようになったかを Promise オブジェクト返す

 HTMLImageElement インターフェイスが継承したHTMLElement インターフェイスのメソッドです。 NodeElement インターフェイスのメソッドを含みます。使えないものもあるので参考してください。

Nodeのメソッド一覧 

タイプ名(ハンドラー名)概要分類

Elementのメソッド一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのメソッド一覧 

タイプ名(ハンドラー名)概要分類

イベント(Event)

 HTMLImageElement にイベントハンドラーを定義する方法には以下があります。

HTMLImageElement.addEventListener( 'click', ()=>{...} )
HTMLImageElement.onclick = function(){...}
<button onclick = "..." >

 イベントについてはEventを参照してください。 イベントの監視についてはEventTargetが担っています。

 以下は、HTMLImageElement が継承しているイベント一覧です。使えないものもあるので参考にしてください。

GlobalEventHandlersのイベント一覧 

タイプ名(ハンドラー名)概要分類

DocumentAndElementEventHandlersのイベント一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのイベント一覧 

タイプ名(ハンドラー名)概要分類

- ad -