objectObject.widthプロパティ

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

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

width属性には、埋め込みオブジェクト（object要素）の表示領域の幅を指定できる。

構文

取得

var $width = $objectElementReference.width;

戻り値

object要素のwidth属性の値。幅。

設定

$objectElementReference.width = 幅;
幅
埋め込みオブジェクト（object要素）の表示領域の幅を、ピクセル単位の数値で指定。

サンプル

object要素のdata属性の値：

object要素のtype属性の値：

object要素のwidth属性の値：

object要素のheight属性の値：

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

サンプルの動作について

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

サンプルのソースコード

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;
}
function setSize( $width, $height ) {
    var $elementReference = document.getElementById( "sample" );
    $elementReference.width = $width;
    $elementReference.height = $height;
    var $width = $elementReference.width;
    var $height = $elementReference.height;
    document.getElementById( "sampleOutputWidth" ).innerHTML = $width;
    document.getElementById( "sampleOutputHeight" ).innerHTML = $height;
}
</script>

HTML

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

スポンサード リンク

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