要素
概要
<img> 要素は画像を挿入するために使用され、主に HTMLImageElement インターフェイスを継承します。
ブラウザは、HTMLImageElement インスタンスを生成するためのネイティブ コンストラクター Image を提供します。
var img = 新しい画像();
img インスタンスオブ画像 // true
img インスタンスオブ HTMLImageElement // true
Image コンストラクターは、<img> 要素の幅と高さを表す 2 つの整数をパラメーターとして受け入れることができます。
// 文法
画像(幅、高さ)
// 使用法
var myImage = 新しい画像(100, 200);
<img> インスタンスの src 属性は、画像の URL を定義できます。
var img = 新しい画像();
img.src = '写真.jpg';
新しく生成された <img> インスタンスはドキュメントの一部ではありません。ドキュメントに表示したい場合は、ドキュメントに手動で挿入する必要があります。
var img = 新しい画像();
img.src = '画像1.png';
document.body.appendChild(img);
Image コンストラクトの使用に加えて、次のメソッドでも HTMLImageElement インスタンスを取得できます。
document.imagesのメンバー- ノード選択メソッド(
document.getElementByIdなど)で取得した<img>ノード document.createElement('img')によって生成された<img>ノード
document.images[0] HTMLImageElement のインスタンス
// 真実
var img = document.getElementById('myImg');
img HTMLImageElement のインスタンス
// 真実
var img = document.createElement('img');
img HTMLImageElement のインスタンス
// 真実
Node、Element、および HTMLElement インターフェイスに加えて、HTMLImageElement インスタンスにはいくつかの固有のプロパティもあります。このインターフェイスは独自のメソッドを定義しません。
機能関連の属性
(1)HTMLImageElement.src
HTMLImageElement.src プロパティは、画像の完全な URL を返します。
// HTMLコードは以下の通り
// <img width="300" height="400" id="myImg" src="http://example.com/pic.jpg">
var img = document.getElementById('img');
img.src // http://example.com/pic.jpg
(2)HTMLImageElement.currentSrc
HTMLImageElement.currentSrc プロパティは、現在表示されている画像の URL を返します。 JavaScript と CSS mediaQuery は両方とも、表示されている画像を変更する可能性があります。
(3)HTMLImageElement.alt
HTMLImageElement.alt 属性は、画像のテキスト説明を表す <img> の HTML 属性 alt を読み書きできます。
(4)HTMLImageElement.isMap、HTMLImageElement.useMap
HTMLImageElement.isMap 属性は、<img> 要素の HTML 属性 ismap に対応し、画像がサーバー側の画像マッピングの一部であるかどうかを示すブール値を返します。
HTMLImageElement.useMap 属性は、<img> 要素の HTML 属性 usemap に対応し、現在の画像に対応する <map> 要素を示します。
(5)HTMLImageElement.srcset、HTMLImageElement.sizes
HTMLImageElement.srcset 属性と HTMLImageElement.sizes 属性は、それぞれ <img> 要素の srcset 属性と sizes 属性の読み取りと書き込みに使用されます。これらは、<img> 要素の応答的な読み込みに使用されます。 srcset 属性は単独で使用できますが、sizes 属性は srcset 属性と一緒に使用する必要があります。
// HTMLコードは以下の通り
// <img srcset="example-320w.jpg 320w,
// example-480w.jpg 480w,
// example-800w.jpg 800w"
// サイズ="(最大幅: 320px) 280px,
// (最大幅: 480px) 440px,
// 800ピクセル」
// id="myImg"
// src="example-800w.jpg">
var img = document.getElementById('myImg');
img.srcset
// "example-320w.jpg 320w,
// example-480w.jpg 480w,
// example-800w.jpg 800w"
画像サイズ
// "(最大幅: 320px) 280px,
// (最大幅: 480px) 440px,
// 800ピクセル」
上記のコードでは、「sizes」属性は、「320px」より小さい画面の場合は画像の幅が「280px」であることを指定し、「480px」より小さい画面の場合は画像の幅が「440px」であることを指定します。場合によっては、画像の幅は 800px になります。次に、ブラウザは、現在の画面上の画像の幅に基づいて、srcset` 属性に最も近い幅の画像を読み込みます。
HTMLImageElement.width、HTMLImageElement.height
width 属性は <img> の HTML の幅を表し、height 属性は高さを表します。どちらのプロパティも整数を返します。
// HTMLコードは以下の通り
// <img width="300" height="400" id="myImg" src="pic.jpg">
var img = document.getElementById('img');
img.width // 300
img.height // 400
画像がロードされていない場合、両方のプロパティは「0」を返します。
HTML コードで width プロパティと height プロパティが設定されていない場合、画像の実際の幅と高さ、つまり HTMLImageElement.naturalWidth プロパティと HTMLImageElement.naturalHeight プロパティが返されます。
HTMLImageElement.naturalWidth、HTMLImageElement.naturalHeight
HTMLImageElement.naturalWidth プロパティは画像の実際の幅 (ピクセル単位) を表し、HTMLImageElement.naturalHeight プロパティは実際の高さを表します。どちらのプロパティも整数を返します。
画像が指定されていない場合、または画像が利用できない場合、両方の属性は「0」に等しくなります。
var img = document.getElementById('img');
if (img.naturalHeight > img.naturalWidth) {
img.classList.add('ポートレート');
}
上記のコードでは、画像の高さが幅よりも大きい場合、「ポートレート」モードに設定されます。
HTMLImageElement.complete
HTMLImageElement.complete プロパティは、チャートがロードされているかどうかを示すブール値を返します。また、<img> 要素に src 属性がない場合は、true を返します。
HTMLImageElement.crossOrigin
HTMLImageElement.crossOrigin 属性は、クロスドメイン設定を示す <img> 要素の crossorigin 属性の読み取りおよび書き込みに使用されます。
この属性には 2 つの可能な値があります。
anonymous: クロスドメイン要求にはユーザー ID (資格情報) は必要ありません。これがデフォルト値です。use-credentials: クロスドメイン要求にはユーザー ID が必要です。
// HTMLコードは以下の通り
// <imgcrossorigin="anonymous" id="myImg" src="pic.jpg">
var img = document.getElementById('img');
img.crossOrigin // "匿名"
HTMLImageElement.referrerPolicy
HTMLImageElement.referrerPolicy は、<img> 要素の HTML 属性 referrerpolicy の読み取りと書き込みに使用されます。これは、画像リソースを要求するときに HTTP リクエストの referrer フィールドを処理する方法を示します。
可能な値は 5 つあります。
no-referrer:referrerフィールドなし。no-referrer-when-downgrade: 要求されたアドレスが HTTPS プロトコルではない場合、デフォルト値であるreferrerフィールドはありません。origin:referrerフィールドは、プロトコル、ドメイン名、ポートを含む現在の Web ページのアドレスです。origin-when-cross-origin: 要求されたアドレスが現在の Web ページと同じ起源のものである場合、referrerフィールドには完全なパスが含まれます。それ以外の場合は、プロトコル、ドメイン名、およびポートのみが含まれます。unsafe-url:referrerフィールドには、プロトコル、ドメイン名、ポートに加えて、現在の Web ページのアドレスが含まれ、パスも含まれます。この設定はパス情報が漏洩するため安全ではありません。
HTMLImageElement.x、HTMLImageElement.y
HTMLImageElement.x プロパティは、ページの左上隅を基準とした画像の左上隅の横座標を返し、HTMLImageElement.y プロパティは縦座標を返します。
イベント属性
画像がロードされると、「onload」属性で指定されたコールバック関数がトリガーされます。
// HTML コードは <img src="example.jpg" onload="loadImage()"> です。
関数loadImage() {
console.log('画像が読み込まれました');
}
画像の読み込み中にエラーが発生した場合、「onerror」属性で指定されたコールバック関数がトリガーされます。
// HTML コードは <img src="image.gif" onerror="myFunction()"> です。
関数 myFunction() {
console.log('何か問題があります');
}
作者: wangdoc
アドレス: https://wangdoc.com/
ライセンス: クリエイティブ・コモンズ 3.0