PHP & JavaScript Room :: 設置サンプル

<form action="#">
    <input type="button" onclick="fChgPhotoSize()" value="画像サイズ取得" />
</form>

<p>
    <img src="/content/img/pic1-thumb.png" alt="写真1" id="p1" />
    <img src="/content/img/dog_mini.gif" alt="写真2" id="p2" />
    <img src="/content/img/deepblue.png" alt="写真3" id="p3" />
</p>

<script type="text/javascript">
function fChgPhotoSize(){
    var photoAry=new Array(
        document.getElementById("p1"),
        document.getElementById("p2"),
        document.getElementById("p3")
    );
    var s="";
    /* 画像の幅と高さを取得 */
    for(var i=0; i<photoAry.length; i++){
        var photo=photoAry[i];
        s+="ID名:"+photo.id+"\t";
        s+="幅:"+photo.width+"px\t";
        s+="高さ:"+photo.height+"px\n";
    }
    /* 取得したサイズを書き出し */
    document.getElementById("res_photosize").innerHTML="<pre>"+s+"</pre>";
}
</script>
<div id="res_photosize"></div>