objectObject.dataは、埋め込みオブジェクト（object要素）のdata属性の値を取得、もしくは、設定するプロパティ。
data属性には、ドキュメントに埋め込むオブジェクトのURLを指定する。data属性値を変更することで、オブジェクトを切り替えることができる。
object要素におけるオブジェクトとは、画像、音声、動画、HTMLドキュメント、Javaアプレットなどの外部リソースのこと。
構文
取得
var $data = $objectElementReference.data;
戻り値
object要素のdata属性の値。ドキュメントに埋め込んだオブジェクトのURL。
設定
$objectElementReference.data = "URL";
- URL
- ドキュメントに埋め込むオブジェクトのURLを指定する。
サンプル
object要素のdata属性の値：
サンプルの動作について
- 2014/01/21現在、Firefoxだけ動作確認。
- 「1」～「5」のボタンをクリックすると、JPG画像を切り替える。「object要素のdata属性の値：」の右横に表示中の画像のURLを表示する。
- 「PDF」のボタンをクリックすると、PDFに切り替える。「object要素のdata属性の値：」の右横に表示中のPDFのURLを表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setData( $data ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.data = $data;
var $data = $elementReference.data;
document.getElementById( "sampleOutput" ).innerHTML = $data;
}
</script>
function setData( $data ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.data = $data;
var $data = $elementReference.data;
document.getElementById( "sampleOutput" ).innerHTML = $data;
}
</script>
HTML
<p>
<button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/1.jpg');">1</button>
<button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/2.jpg');">2</button>
<button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/3.jpg');">3</button>
<button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/4.jpg');">4</button>
<button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/5.jpg');">5</button>
<button onclick="setData('http://alphasis.info/wp-content/uploads/2014/01/sampleObject.pdf');">PDF</button>
</p>
<p>object要素のdata属性の値：<span id="sampleOutput"></span></p>
<object data="http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/1.jpg" id="sample">
<p>お使いのブラウザはobject要素に対応していません。</p>
</object>
<button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/1.jpg');">1</button>
<button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/2.jpg');">2</button>
<button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/3.jpg');">3</button>
<button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/4.jpg');">4</button>
<button onclick="setData('http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/5.jpg');">5</button>
<button onclick="setData('http://alphasis.info/wp-content/uploads/2014/01/sampleObject.pdf');">PDF</button>
</p>
<p>object要素のdata属性の値：<span id="sampleOutput"></span></p>
<object data="http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/1.jpg" id="sample">
<p>お使いのブラウザはobject要素に対応していません。</p>
</object>