【javascript】を使ってCSSの内容を動的に変更する、ボタンを押すと画像のサイズが変わるようにしたい

1つ前の記事と関係しています

(あとでリンクを貼る)

やりたいこと

imgタグがついてる画像の大きさ(width)を一括で変更するボタンをjavascriptで作りたい

CSSの内容取得をしたい

最初はstyleを修正したい要素を、idを使って取得しようとしていましたが、1つのhtmlコードでidは重複して設定できないです
つまり、同じ設定を一気に反映させることができない・・・

思いついたのは

• getElementByClassName
• getElementsByTagName

のどちらかを使って、CSSの設定を変えたい要素を一気に取得する方法

最初はgetElementByClassName でやってたけど、うまくいかなかったので、getElementsByTagNameで行う

html

htmlを用意する、imgタグをつけていればOK

<img src="hoge.png" alt="hoge.png" title="hoge.png">

javascript

imgタグがついている要素を取得して大きさを変更する

console.log(imgElement)は内容を確認するためだけなので、消してOK

関数の引数のwidthで、画像の大きさをwindowサイズの何%にしたいかを設定する

function clickBtn_img_width(width){
    var imgElement = document.getElementsByTagName('img');
    console.log(imgElement)
    for( var i = 0; i < imgElement.length; i++  ){
        imgElement[i].style.width = width + '%';
    }
}

document.getElementsByTagName('img')の返り値は、配列みたいなオブジェクトなので、それをfor文を使って回して修正する

参考

JavaScriptのfor..in文でDOM操作しようとしてハマった件 #dom - Qiita

html

以下のようなボタンを用意する
98とか49は1つの画像の大きさを、windowsサイズの何%に設定するかに相当する
ボタンを押すと、画像のCSSのimg.style.windowに値を代入する

clickBtn_img_width()は↑のjavascript

<input type="button" onclick="clickBtn_img_width(98)" value="one column">
<input type="button" onclick="clickBtn_img_width(49)" value="two column">
<input type="button" onclick="clickBtn_img_width(32)" value="three column">

うまくいってると、画像の大きさが

<img src="hoge.png" alt="hoge.png" title="hoge.png" style="width: 32%;">

とかみたいに、変更されてるはず

うまくいってるかどうかは開発者ツールとかで見れるはず

これでやりたかったことはできた

参考

qiita.com