ジャバスクリプト：<IMG>元素

原文章：https://wangdoc.com/javascript/index.html

<img> 要素

アウトライン

<img>要素画像を挿入するために使用され、主HTMLImageElementインタフェースを継承。

ブラウザは、ネイティブのコンストラクタ提供してImage生成するためのHTMLImageElementインスタンスを。

var img = new Image();
img instanceof Image // true
img instanceof HTMLImageElement // true

Imageコンストラクタは、それぞれ、パラメータとして2つの整数を受け入れる表すことができる<img>要素の幅と高さ。

// 语法
Image(width, height)

// 用法
var myImage = new Image(100, 200);

<img>例srcプロパティは、画像のURLを定義することができます。

var img = new Image();
img.src = 'picture.jpg';

新しく生成された<img>インスタンスは、文書の一部ではありません。あなたはそれがあなたの文書に表示したい場合は、手動で文書に挿入しなければなりません。

var img = new Image();
img.src = 'image1.png';
document.body.appendChild(img);

使用に加えて、Imageコンフィギュレーション、次のような方法が得られるHTMLImageElementインスタンス。

• document.imagesメンバー
• ノード選択方法（例えばdocument.getElementById）得られた<img>ノード
• document.createElement('img')生成された<img>ノード

document.images[0] instanceof HTMLImageElement
// true

var img = document.getElementById('myImg');
img instanceof HTMLImageElement
// true

var img = document.createElement('img');
img instanceof HTMLImageElement
// true

HTMLImageElementノード、要素、のHTMLElementインターフェース、実施例のほかにもいくつかのユニークな特性を有します。このインタフェースは、独自のメソッドを定義していません。

特性関連するプロパティ

（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"
//      sizes="(max-width: 320px) 280px,
//             (max-width: 480px) 440px,
//             800px"
//      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"

img.sizes
// "(max-width: 320px) 280px,
//  (max-width: 480px) 440px,
//  800px"

上記のコードでは、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

イメージがロードされていない場合は、これら2つのプロパティが返されます0。

HTMLコードが設定されていない場合widthとheight、すなわち、それらは実際の画像の幅と高さの戻り属性HTMLImageElement.naturalWidthの属性とHTMLImageElement.naturalHeight特性。

HTMLImageElement.naturalWidth、HTMLImageElement.naturalHeight

HTMLImageElement.naturalWidth属性は、画像の（ピクセル単位）の実際の幅を示すHTMLImageElement.naturalHeight属性が実際の高さを示しています。どちらのプロパティが返さ整数です。

画像が指定されていないか、利用できなかった場合は、これら2つの属性が同じです0。

var img = document.getElementById('img');
if (img.naturalHeight > img.naturalWidth) {
  img.classList.add('portrait');
}

上記のコードでは、画像の高さ、幅、設定よりも大きい場合portraitのモード。

HTMLImageElement.complete

HTMLImageElement.completeプロパティは、チャートがロードされているかどうかを示すブール値を返します。場合<img>要素は何も持っていないsrcプロパティを、また戻りますtrue。

HTMLImageElement.crossOrigin

HTMLImageElement.crossOrigin属性は読み取りと書き込みのために使用される<img>要素crossoriginの属性を、クロスセットを表します。

このプロパティは、2つの値があります。

• anonymous：クロスドメインリクエストがデフォルトでユーザー認証（資格情報）を、必要としません。
• use-credentials：クロスドメインリクエストは、ユーザー認証を必要とします。

// HTML 代码如下
// <img crossorigin="anonymous" id="myImg" src="pic.jpg">
var img = document.getElementById('img');
img.crossOrigin // "anonymous"

HTMLImageElement.referrerPolicy

HTMLImageElement.referrerPolicy読み書き用<img>のHTML属性の要素をreferrerpolicy、画像リソース要求は、HTTPリクエストの処理方法を示すreferrerフィールドを。

これは、5つの可能な値を持っています。

• no-referrer：なしreferrerフィールド。
• no-referrer-when-downgrade：要求されたアドレスがある場合ではないではないと、HTTPSプロトコルをreferrerデフォルトでフィールド、。
• origin：referrerフィールドには、プロトコル、ドメイン名およびポートを含め、現在のページのアドレスです。
• origin-when-cross-origin：現在のページ要求のアドレスが相同関係、そしてある場合にはreferrer、フルパスでフィールドそうでない場合、それは唯一のプロトコル、ドメイン名とポートが含まれます。
• unsafe-url：referrerフィールドは、さらにパスを備え、プロトコル、ドメイン名とポートに加えて、現在のページのアドレスが含まれています。この設定は、リーク経路情報ため、危険です。

HTMLImageElement.x、HTMLImageElement.y

HTMLImageElement.xプロパティは、横軸に対する画像の左上隅を返し、HTMLImageElement.yプロパティは、縦軸を返します。

イベントのプロパティ

画像の読み込みは、それが引き金となり、完了したonload属性指定にコールバック関数を。

// HTML 代码为 <img src="example.jpg" onload="loadImage()">
function loadImage() {
  console.log('Image is loaded');
}

エラーが画像の読み込み中に発生した、トリガーonerror属性は、コールバック関数を指定します。

// HTML 代码为 <img src="image.gif" onerror="myFunction()">
function myFunction() {
  console.log('There is something wrong');
}