JavaScript 画像の幅を設定・取得する
Imageオブジェクト、または、ページ上に表示されているimg要素のサイズは、widthプロパティとheightプロパティで取得と設定ができます。widthプロパティは横幅、heightプロパティは縦幅となり、widthプロパティとheightプロパティで取得・設定する値の単位はピクセルとなります。widthプロパティ、heightプロパティだけでなく、CSSのwidthプロパティ、heightプロパティを使って設定することもできます。その場合は、320ptのように単位付きで設定する必要があります。
<body>
<script>
window.addEventListener("load" , function(){
var btn = document.getElementsByTagName("input");
//img要素を読みだす
var myImage = document.getElementsByTagName("img")[0];
//ボタンにイベントを設定する
btn[0].addEventListener("click", function(){
var ele = document.getElementsByTagName("output")[0];
//表示されている画像の横幅を読みだす
var w = myImage.width;
//表示されている画像の縦幅を読み出す
var h = myImage.height;
ele.innerHTML = "横幅:"+w+"縦幅:"+h;
},false);
btn[1].addEventListener("click", function(){
//表示されている画像の横幅を320pxにする
myImage.width = 320;
//表示されている画像の縦幅を240pxにする
myImage.height = 240;
},false);
}, false);
</script>
<div>
<img src="./images/629959_s.jpg" width ="80" height="60">
</div>
<form>
<input type="button" value="画像の幅を取得">
<input type="button" value="画像の幅を変更">
</form>
<output></output>
</body>画像の幅を取得ボタンをクリックすると、画像の横幅と縦幅が表示されます
画像の幅を変更ボタンをクリックすると、画像のサイズが変わります。
