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

HTMLのobject要素でリソースのURLを指定する方法｜data属性の使い方

HTMLでは、<object>要素が使用するリソースのURLを指定するためにdata属性を使用します。data属性には、ページに埋め込みたいファイル（PDF、動画、画像など）へのパスを記述します。

基本構文

<object>要素にdata属性を追加するだけで、指定したリソースを読み込むことができます。また、width属性とheight属性を併用することで、表示サイズを制御できます。

サンプルコード

以下のコードは、data属性を使ってオブジェクトのリソースURLを指定する実装例です。実際に動かして挙動を確認してみてください。

<!DOCTYPE html>
<html>
    <body>
        <h2>デモ</h2>
        <object width="250" height="300" data="demo.swf">
        </object>
    </body>
</html>

補足ポイント

  • data属性の値には、絶対URL・相対URLのどちらでも指定できます。
  • type属性を併用してMIMEタイプを明示すると、ブラウザが適切な処理方法を選択しやすくなります。
  • <object>要素の開始タグと終了タグの間にテキストを記述しておくと、リソースが読み込めなかった場合のフォールバック表示として機能します。
  1. HTML DOM InputEventオブジェクトとは？主要プロパティと使い方を解説

    InputEventオブジェクトとはInputEventオブジェクトは、フォーム要素などのコンテンツが変化した際に発生するイベントを表すオブジェクトです。テキストボックスへの文字入力・削除・貼り付けなど、ユーザーによるあらゆる編集操作を「inputイベント」として受け取り、JavaScript側で処理することができます。InputEventの主なプロパティ・メソッドInputEventでは、以下のプロパティやメソッドを利用できます。プロパティ／メソッド説明data挿入された文字に対応する文字列を返します。dataTransfer挿入・削除されたデータに関する情報を含むオブジェクトを返します。g

  2. HTML DOM Objectのdataプロパティとは？使い方とサンプルコードを解説

    HTML DOM Object dataプロパティとはHTML DOMのObject要素が持つdataプロパティは、<object>要素のdata属性の値に対応する文字列（URL）を取得または設定するためのプロパティです。このプロパティを使うことで、JavaScriptから動的にオブジェクトで埋め込まれたリソースのURLを読み取ったり、変更したりすることができます。構文data属性の値を取得する場合ObjectElement.datadata属性に文字列値（URL）を設定する場合ObjectElement.data = URLStringHTML DOM Object dataプロ