HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのImageオブジェクトとは？使い方と主要プロパティを解説

HTML DOM の Image オブジェクトは、HTML ドキュメント内の <img> 要素を表すオブジェクトです。JavaScript を使えば、このオブジェクトを通じて画像の動的な生成や属性の操作が可能になります。

img オブジェクトの作成方法

それでは、実際に img オブジェクトを作成してみましょう。

構文

以下が基本的な構文です。

document.createElement("IMG");

Image オブジェクトの主なプロパティ

Image オブジェクトには、以下のようなプロパティが用意されています。

プロパティ説明
alt画像要素の alt 属性の値を取得・変更します。
completeブラウザが Web ページ上の画像の読み込みを完了したかどうかを返します。
crossOrigin画像要素の CORS（クロスオリジン）設定を取得・変更します。
height画像要素の height 属性の値を取得・変更します。
naturalHeightHTML ドキュメント内の画像の本来の高さ（ピクセル）を返します。
naturalWidthHTML ドキュメント内の画像の本来の幅（ピクセル）を返します。
src画像要素の src 属性の値を取得・変更します。
useMap画像要素の useMap 属性の値を取得・変更します。
width画像要素の width 属性の値を取得・変更します。
isMap画像がサーバーサイドイメージマップの一部として扱われるかどうかを取得・変更します。

サンプルコード

ここで、HTML DOM の Image オブジェクトを使った具体的な例を見てみましょう。ボタンをクリックすると、新しい画像要素が動的に生成される仕組みです。

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
    }
    .btn{
        background-color:lightblue;
        border:none;
        height:2rem;
        border-radius:50px;
        width:60%;
        margin:1rem auto;
        display:block;
    }
</style>
</head>
<body>
<h1>DOM Image Object Example</h1>
<button onclick="createImg()" class="btn">Click me to create an image</button>
<script>
    function createImg() {
        var x = document.createElement("IMG");
        x.setAttribute("src", "https://www.tutorialspoint.com/servlets/images/servlets-mini-logo.jpg");
        x.setAttribute("alt", "Learn Servlets");
        document.body.appendChild(x);
    }
</script>
</body>
</html>

なお、上記のコードでは元のサンプルにあった関数名の不整合（createIframe と createImg）や src 属性の引用符の欠落を修正しています。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのImageオブジェクトとは？使い方と主要プロパティを解説

「Click me to create an image」ボタンをクリックすると、新しい画像要素がページに追加されます。

HTML DOMのImageオブジェクトとは？使い方と主要プロパティを解説

このように、document.createElement("IMG") を使うことで、JavaScript から簡単に画像要素を動的に生成し、Web ページへ挿入することができます。

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注