objectObject.typeプロパティ

投稿日: 2014年2月18日 作成者: alphasis

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オブジェクト, リファレンス パーマリンク