HTMLImageElement - HTMLのimg要素

公開日: 2017/02/27

HTMLImageElementは、HTMLのimg要素が実装するインターフェイスです。

概要

名前

HTMLImageElement

継承

実装

実装するインターフェイスはありません。

IDL

[HTMLConstructor, NamedConstructor=Image(optional unsigned long width, optional unsigned long height)]
interface HTMLImageElement : HTMLElement {
  [CEReactions] attribute DOMString alt;
  [CEReactions] attribute USVString src;
  [CEReactions] attribute USVString srcset;
  [CEReactions] attribute DOMString sizes;
  [CEReactions] attribute DOMString? crossOrigin;
  [CEReactions] attribute DOMString useMap;
  [CEReactions] attribute boolean isMap;
  [CEReactions] attribute unsigned long width;
  [CEReactions] attribute unsigned long height;
  readonly attribute unsigned long naturalWidth;
  readonly attribute unsigned long naturalHeight;
  readonly attribute boolean complete;
  readonly attribute USVString currentSrc;
  [CEReactions] attribute DOMString referrerPolicy;
};

// CSSOM View Module
partial interface HTMLImageElement {
  readonly attribute long x;
  readonly attribute long y;
};

仕様書

https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement (HTML Element)

https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlimageelement-interface (CSSOM View Module)

説明

HTMLImageElementを作成する例です。コンストラクタが用意されています。

JavaScript

// 要素を作成する (コンストラクタを利用)
var element = new Image( 10, 20 ) ;	// <img width="10" height="20">

// 要素を作成する (メソッドを利用)
var element = document.createElement( "img" ) ;	// <img>
element.width = 10 ;	// →<img width="10">
element.height = 20 ;	// →<img width="10" height="20">

// 内容を設定する
element.src = "./image.png" ;	// →<img width="10" height="20" src="./image.png">

画像の読み込みが完了したタイミングで処理をします。

JavaScript

// 要素を作成する (コンストラクタを利用)
var element = new Image() ;	// <img>

// イベントを設定する
element.onload = function ( event ) {
	// ...
}

// src属性を設定する (セットすると読み込みを開始する)
element.src = "./image.png" ;	// →<img src="./image.png">

表示されているサイズではなく、画像の本来のサイズを取得できます。

HTML

<img src="./image.png" width="999" height="999" id="hoge">

JavaScript

// 要素を作成する
var element = document.getElementById( "hoge" ) ;	// <img src="./image.png" width="999" height="999" id="hoge">

// 画像の本来のサイズを設定する
var width = element.naturalWidth ;	// →600 (例)
var height = element.naturalHeight ;	// →315 (例)

コンストラクタ

Image()

HTMLImageElementのコンストラクタです。

プロパティ

Node、Element、HTMLElementのプロパティを利用できます。

HTMLImageElement.alt

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

alt属性を反映します。

HTMLImageElement.complete

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

画像の取得を完了している場合はtrue、違う場合はfalseを返します。取得の成功、失敗は関係ありません。

HTMLImageElement.crossOrigin

Chrome: ●
Firefox: ● 8+
Edge: ●
IE: ● 11+
Safari: ● 6.0+
Opera: ● 12+
iOS: ● 6.0+
Android: ● 4.4+

crossorigin属性を反映します。

HTMLImageElement.currentSrc

Chrome: ● 38+
Firefox: ● 38+
Edge: ●
IE: ×
Safari: ● 9.1+
Opera: ● 25+
iOS: ● 10.0+
Android: ×

現在、表示されている画像のアドレスを返します。

HTMLImageElement.height

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

height属性を反映します。

HTMLImageElement.isMap

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

ismap属性を反映します。

HTMLImageElement.naturalHeight

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

画像の本来の高さを返します。

HTMLImageElement.naturalWidth

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

画像の本来の横幅を返します。

HTMLImageElement.referrerPolicy

Chrome: ● 53+
Firefox: ● 50+
Edge: ×
IE: ×
Safari: ×
Opera: ● 40+
iOS: ×
Android: ×

referrerpolicy属性を反映します。

HTMLImageElement.sizes

Chrome: ● 38+
Firefox: ● 38+
Edge: ●
IE: ×
Safari: ● 9.1+
Opera: ● 25+
iOS: ● 10.0+
Android: ×

sizes属性を反映します。

HTMLImageElement.src

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

src属性を反映します。

HTMLImageElement.srcset

Chrome: ● 34+
Firefox: ● 38+
Edge: ●
IE: ×
Safari: ● 7.1+
Opera: ● 21+
iOS: ● 8.3+
Android: ×

srcset属性を反映します。

HTMLImageElement.useMap

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

usemap属性を反映します。

HTMLImageElement.width

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

width属性を反映します。

HTMLImageElement.x

Chrome: ●
Firefox: ● 14+
Edge: ●
IE: ×
Safari: ●
Opera: ●
iOS: ●
Android: ●

水平方向の位置を返します。

HTMLImageElement.y

Chrome: ●
Firefox: ● 14+
Edge: ●
IE: ×
Safari: ●
Opera: ●
iOS: ●
Android: ●

垂直方向の位置を返します。

メソッド

EventTarget、Node、Element、HTMLElementのメソッドを利用できます。

定数

Nodeの定数を利用できます。

サポート状況

HTMLImageElementのサポート状況です。

ブラウザ	サポート状況	ブラウザ	サポート状況
Chrome	Supported	Firefox	Supported
Edge	Supported	Internet Explorer	Supported
Safari	Supported	Opera	Supported
iOS Safari	Supported	Android	Supported

Chrome

バージョン	サポート状況	公開時期	シェア
57	Supported	2017年3月頃	0.1%
56	Supported	2017年1月頃	12.02%
55	Supported	2016年12月頃	12.36%
54	Supported	2016年10月頃	0.44%
53	Supported	2016年9月頃	0.25%
52	Supported	2016年7月頃	0.27%
51	Supported	2016年6月頃	0.4%
50	Supported	2016年4月頃	0.32%
49	Supported	2016年3月頃	0.47%
48	Supported	2016年1月頃	0.02%
47	Supported	2015年12月頃	0.06%
46	Supported	2015年10月頃	0.56%
45	Supported	2015年9月頃	0.01%
44	Supported	2015年7月頃	0.83%
43	Supported	2015年5月頃	0.05%
42	Supported	2015年4月頃	0.05%
41	Supported	2015年3月頃	0.01%
40	Supported	2015年1月頃	0.59%
39	Supported	2014年11月頃	0.02%
38	Supported	2014年10月頃	0.08%
37	Supported	2014年8月頃	0.01%
36	Supported	2014年7月頃	0.01%
35	Supported	2014年5月頃	0.01%
34	Supported	2014年4月頃	0.14%
33	Supported	2014年2月頃	0.01%
32	Supported	2014年1月頃	0%
31	Supported	2013年11月頃	0.01%
30	Supported	2013年10月頃	0.03%
29	Supported	2013年8月頃	0%
28	Supported	2013年6月頃	0.03%
27	Supported	2013年5月頃	0.01%
26	Supported	2013年3月頃	0%
25	Supported	2013年2月頃	0%
24	Supported	2013年1月頃	0%
23	Supported	2012年11月頃	0%
22	Supported	2012年9月頃	0%
21	Supported	2012年7月頃	0%
20	Supported	2012年6月頃	0%
19	Supported	2012年5月頃	0%
18	Supported	2012年3月頃	0.01%
17	Supported	2012年2月頃	0.01%
16	Supported	2011年12月頃	0%
15	Supported	2011年10月頃	0%
14	Supported	2011年9月頃	0%

Firefox

バージョン	サポート状況	公開時期	シェア
52	Supported	2017年3月頃	0.12%
51	Supported	2017年1月頃	1.7%
50	Supported	2016年11月頃	0.78%
49	Supported	2016年9月頃	0.02%
48	Supported	2016年8月頃	0.07%
47	Supported	2016年6月頃	0.03%
46	Supported	2016年4月頃	0.01%
45	Supported	2016年3月頃	0.1%
44	Supported	2016年1月頃	0.01%
43	Supported	2015年12月頃	0.02%
42	Supported	2015年11月頃	0.01%
41	Supported	2015年9月頃	0%
40	Supported	2015年8月頃	0.02%
39	Supported	2015年7月頃	0.01%
38	Supported	2015年5月頃	0.02%
37	Supported	2015年3月頃	0%
36	Supported	2015年2月頃	0.01%
35	Supported	2015年1月頃	0%
34	Supported	2014年12月頃	0.01%
33	Supported	2014年10月頃	0%
32	Supported	2014年9月頃	0%
31	Supported	2014年7月頃	0.01%
30	Supported	2014年6月頃	0%
29	Supported	2014年4月頃	0%
28	Supported	2014年3月頃	0.01%
27	Supported	2014年2月頃	0%
26	Supported	2013年12月頃	0%
25	Supported	2013年10月頃	0%
24	Supported	2013年9月頃	0%
23	Supported	2013年8月頃	0%
22	Supported	2013年6月頃	0%
21	Supported	2013年5月頃	0%
20	Supported	2013年4月頃	0%
19	Supported	2013年2月頃	0%
18	Supported	2013年1月頃	0%
17	Supported	2012年11月頃	0%
16	Supported	2012年10月頃	0%
15	Supported	2012年8月頃	0%
14	Supported	2012年7月頃	0%
13	Supported	2012年6月頃	0%
12	Supported	2012年4月頃	0%
11	Supported	2012年3月頃	0%
10	Supported	2012年1月頃	0%
9	Supported	2011年12月頃	0%
8	Supported	2011年11月頃	0%
7	Supported	2011年9月頃	0%
6	Supported	2011年8月頃	0%
5	Supported	2011年6月頃	0%
4	Supported	2011年3月頃	0%

Edge

バージョン	サポート状況	公開時期	シェア
14	Supported	2016年2月頃	1.05%
13	Supported	2015年9月頃	0.08%

Internet Explorer

バージョン	サポート状況	公開時期	シェア
11	Supported	2013年10月頃	4.99%
10	Supported	2012年8月頃	0.09%
9	Supported	2011年3月頃	0.18%
8	Supported	2009年3月頃	0.04%
7	Supported	2006年10月頃	0.01%
6	Supported	2001年8月頃	0%

Safari

バージョン	サポート状況	公開時期	シェア
10	Supported	2016年10月頃	0%
9.1	Supported	2015年9月頃	0%
8.0	Supported	2014年10月頃	0%
7.1	Supported	2013年10月頃	0%
6.0	Supported	2012年7月頃	0%
5.1	Supported	2011年7月頃	0%
4	Supported	2009年6月頃	0%

Opera

バージョン	サポート状況	公開時期	シェア
43	Supported	2017年2月頃	0.06%
42	Supported	2016年12月頃	0.09%
41	Supported	2016年10月頃	0.01%
40	Supported	2016年9月頃	0%
39	Supported	2016年8月頃	0%
38	Supported	2016年6月頃	0%
37	Supported	2016年5月頃	0.01%
36	Supported	2016年3月頃	0.01%
35	Supported	2016年2月頃	0%
34	Supported	2015年12月頃	0%
33	Supported	2015年10月頃	0%
32	Supported	2015年9月頃	0%
31	Supported	2015年8月頃	0%
30	Supported	2015年6月頃	0%
29	Supported	2015年4月頃	0%
28	Supported	2015年3月頃	0%
27	Supported	2015年1月頃	0%
26	Supported	2014年12月頃	0%
25	Supported	2014年10月頃	0%
24	Supported	2014年9月頃	0%
23	Supported	2014年7月頃	0%
22	Supported	2014年6月頃	0%
21	Supported	2014年5月頃	0.01%
20	Supported	2014年3月頃	0%
19	Supported	2014年1月頃	0%
18	Supported	2013年11月頃	0%
17	Supported	2013年10月頃	0%
16	Supported	2013年8月頃	0%
15	Supported	2013年7月頃	0%
12	Supported	2012年6月頃	0.02%
11.6	Supported	2011年12月頃	0%
11.1	Supported	2011年4月頃	0%

iOS Safari

バージョン	サポート状況	公開時期	シェア
10.0	Supported	2016年9月頃	39.65%
9.1	Supported	2015年9月頃	5.39%
8.3	Supported	2014年9月頃	1.03%
7.0	Supported	2013年9月頃	0.24%
6.0	Supported	2012年9月頃	0.05%
5.1	Supported	2011年10月頃	0.03%

Android

バージョン	サポート状況	公開時期	シェア
4.4	Supported	2013年10月頃	0%
4.3	Supported	2013年7月頃	0%
4.2	Supported	2013年3月頃	0.03%
4.1	Supported	2012年12月頃	0%
4.0	Supported	2012年6月頃	1.61%
2.3	Supported	2011年10月頃	0%