新JavaScript例文辞典

画像の横幅、縦幅を変更する (スタイルシートで設定)

説明

画像の横幅、縦幅をスタイルシートプロパティの値を読み出し変更することができます。ただし、style属性から読み出す場合にはimgタグのstyle属性でwidth、heightプロパティを設定しておかなければなりません。style属性で設定されていない場合はdocument.defaultView.getComputedStyle()とgetPropertyValue()を使って現在設定(表示)されているプロパティの値を読み出します。読み出した値に加算・減算などをしstyle.width、style.heightに設定することで画像の幅が変わります。

サンプルプログラム

window.onload = function(){
setInterval("changeSize()", 1000);
var imgObj = document.getElementById("photo01");
}
// 画像の幅を広げるための関数
function changeSize(){
var imgObj = document.getElementById("photo01");
var imgData = document.defaultView.getComputedStyle(imgObj, null);
var w = parseInt(imgData.getPropertyValue("width"));
var h = parseInt(imgData.getPropertyValue("height"));
w = w + 10;
h = h + 10;
imgObj.style.width = w+"px";
imgObj.style.height = h+"px";
}
サンプルを実行
[戻る]