objectObject.typeプロパティ

objectObject.typeは、埋め込みオブジェクト(object要素)のtype属性の値を取得、もしくは、設定するプロパティ。

type属性には、ドキュメントに埋め込むオブジェクトのファイル形式(MIMEタイプ)を指定する。

構文

取得

var $type = $objectElementReference.type;

戻り値

object要素のtype属性の値。ドキュメントに埋め込んだファイル形式(MIMEタイプ)。

設定

$objectElementReference.type = "ファイル形式";
ファイル形式
ドキュメントに埋め込むオブジェクトのファイル形式(MIMEタイプ)を指定する。
MIMEタイプ
MIMEタイプで指定。
例:
  • text/html:HTML
  • text/xml:XML
  • text/css:CSS
  • text/plain:テキスト
  • image/png:PNG
  • image/jpeg:JPEG
  • image/gif:GIF
  • audio/mpeg:MP3
  • video/mpeg:MPEG
  • video/mp4:MP4
  • application/pdf:PDF
  • application/x-shockwave-flash:Flash

サンプル

object要素のdata属性の値:

object要素のtype属性の値:

お使いのブラウザはobject要素に対応していません。

サンプルの動作について

  • 2014/01/21現在、Firefoxだけ動作確認。
  • 「1」~「5」のボタンをクリックすると、JPG画像を切り替える。「object要素のdata属性の値:」の右横に表示中の画像のURLを表示する。「object要素のtype属性の値:」の右横に「image/jpeg」と表示する。
  • 「PDF」のボタンをクリックすると、PDFに切り替える。「object要素のdata属性の値:」の右横に表示中のPDFのURLを表示する。「object要素のtype属性の値:」の右横に「application/pdf」と表示する。
  • 「MP3」のボタンをクリックすると、MP3に切り替える。「object要素のdata属性の値:」の右横に表示中のMP3のURLを表示する。「object要素のtype属性の値:」の右横に「audio/mpeg」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setData( $data ) {
    var $elementReference = document.getElementById( "sample" );
    $elementReference.data = $data;
    var $data = $elementReference.data;
    document.getElementById( "sampleOutputData" ).innerHTML = $data;
}
function setType( $type ) {
    var $elementReference = document.getElementById( "sample" );
    $elementReference.type = $type;
    var $type = $elementReference.type;
    document.getElementById( "sampleOutputType" ).innerHTML = $type;
}
</script>

HTML

<p>
    <button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/1.jpg'); setType('image/jpeg');">1</button>
    <button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/2.jpg'); setType('image/jpeg');">2</button>
    <button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/3.jpg'); setType('image/jpeg');">3</button>
    <button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/4.jpg'); setType('image/jpeg');">4</button>
    <button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/5.jpg'); setType('image/jpeg');">5</button>
    <button onclick="setData('http://alphasis.info/wp-content/uploads/2014/01/sampleObject.pdf'); setType('application/pdf');">PDF</button>
    <button onclick="setData('http://alphasis.info/wp-content/uploads/2011/05/lmms-tutorial-techno-arpeggio.mp3'); setType('audio/mpeg');">MP3</button>
</p>
<p>object要素のdata属性の値:<span id="sampleOutputData"></span></p>
<p>object要素のtype属性の値:<span id="sampleOutputType"></span></p>
<object data="http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/1.jpg" id="sample">
    <p>お使いのブラウザはobject要素に対応していません。</p>
</object>

スポンサード リンク

カテゴリー: DOM, JavaScript, Objectオブジェクト, リファレンス パーマリンク