JavaScript で CSS を動的に変更できないとき

JavaScript で css を操作して画像の幅を変えようとしても、反映されない。

50pxのアイコン

JavaScriptで150pxにしたい

結論

"px" をつけます。↓例

const img = document.getElementById("img1");
const width = 150;
img.style.width = width + "px";

JavaScriptでCSSの値を書き換える方法

JavaScript で css の要素を操作するときは「文字列」を代入しなければならないようです。

例えば下のコードはうまく動きません。

const img = document.getElementById("img1");
const width = 150;
img.style.width = width;   //画像が150pxにならない

画像は50pxのまま

width は数値なので、img.style.widthにそのまま代入しても期待した結果にはなりません。そこで、

img.style.width = width + "px";   //150px

のように "px" をつけることで、文字列に変換します。

150pxに設定できた

CSSの値をJavaScriptで取得する場合

逆に、css の値を javascript で使う場合、

const width = img.style.width;   //"50px"

のように書くと width は例えば "50px" という文字列になってしまいます。

数値として使いたい場合は parseInt 関数を使いましょう。

const width = pareseInt(img.style.width);   //50

これで width に 50 という数値が入ります。