Javascript で .style.height = ''; と .style.width = ''; をまとめて設定したい場合どのように書けばよいでしょうか？

Question

実現したいこと

Javascript で style をまとめて書きたいです。

発生している問題・分からないこと

style を分けて書くことは出来るのですが、まとめて書く方法が分かりません。

該当のソースコード

const changeImg = document.querySelectorAll('.changeImg').setAttribute('src', ev.target.result).height = '90px';　

const changeImg = document.querySelectorAll('.changeImg').setAttribute('src', ev.target.result).width = '90px';

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

調べてみても該当する記事を見つけることが出来ず困っております。

補足

特になし

Comments

[utm.]

document.querySelectorAllをforeachメソッドなどでイテレートし、コールバック関数の引数を対象のELEMENTと考えて設定してください。

[homepage-site]

アドバイスありがとうございます。
下記のようなコードになるとわかったのですが、この後に width も書きたい場合どうすればよいでしょうか？

const changeImg = document.querySelectorAll('.changeImg').forEach(v => v.style.height = "90px");

[utm.]

CSSを使った方があらゆる面で良いかと思います、検討しましたか？

[yambejp]

読み込んだfileのサイズを元に動的にheight/widthを変更したいのでないなら、最初に固定値を指定しておわりでしょう

[homepage-site]

utm. さん回答ありがとうございます。
視野が狭かったようで全く頭にありませんでした…

[homepage-site]

yambejp さん回答ありがとうございます。
読み込んだfileのサイズを元にしたいのであれば最初に固定値を指定、ファイルをチェックして変換するのであればそのタイミングで良さそうですね、勉強になりました。

Answer 1

Elementのstyleプロパティはけっきょくは style 属性値になるので、e.setAttribute('style', 'height:90px; width:90px') や e.style = 'height:90px; width:90px' でいいんじゃないでしょうか。また、固定値を設定するのならクラスでやるべきでしょう。

.h90w90 {
  height: 90px;
  width: 90px;
}

document.querySelectorAll('.changeImg').forEach(v => {
  v.setAttribute('src', ev.target.result);
  v.classList.add('h90w90');
});

setAttribute() に戻り値はないので、メソッドチェーンでスタイル設定をすることはできません。

Comments

[homepage-site]

回答ありがとうございます。
クラスを設定した方が適切なんですね勉強になりました。
setAttribute() に戻り値はないというのも勉強不足だったようです覚えておきます。

Answer 2

欲しい最終形がよくわからないのですが

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.changeImg').forEach(x=>{Object.assign(x.style,{height:'90px',width:'90px'})});
});
</script>
<img class="changeImg" alt="1">
<img class="changeImg" alt="2">
<img class="changeImg" alt="3">

参考

うけとったファイルをimgタグに表示する

<form class="user-area">
  <label>
    <div class="user-icon">
      <img
        src=""
        class="changeImg"
        style="height: 90px; width: 90px"
      />
    </div>
    <input
      type="file"
      name="attach[]"
      class="attach"
      data-maxsize="5"
      accept=".png, .jpg, .jpeg"
      hidden="true";
    />
  </label>
  <button type="reset">clear</button>
</form>

<script>
document.addEventListener('change',ev=>{
  if(ev.target.matches('.attach')){
    const file = ev.target.files[0];
    const fr = new FileReader();
    fr.onload=e=>{
      document.querySelector( '.changeImg' ).src=e.target.result;
    }
    fr.readAsDataURL(file);
  }
});
</script>

Comments

[homepage-site]

アドバイスありがとうございます。
前後のコードがないため最終形が分からない形になってしまい申し訳ありません。
.setAttribute('src', ev.target.result); はファイルアップロードの際に src を書きかえたいので残しておきたいです。

<div class="user-area">
<label>
<div class="user-icon">
<img
src=""
class="changeImg"
style="height: 90px; width: 90px"
/>
</div>
<input
type="file"
name="attach[]"
class="attach"
data-maxsize="5"
accept=".png, .jpg, .jpeg"
style="display: none"
/>
</label>
<div class="viewer" style="display: none"></div>
<button type="button" class="attachclear">clear</button>
</div>

<script>
//画像が選択される度に、この中の処理が走る
const attach = document.querySelectorAll('.attach').onchange = function (ev) {

//コンソールタブで適切に処理が動いているか確認
//console.log("image is changed");

//input で選択したファイルを非同期で読み取る
const reader = new FileReader();
//--ファイル名を取得（ファイル名は危険なのでそのまま使えない）
//const fileName = ev.target.files[0].name;

//--画像が読み込まれた時の動作を記述（Webページの読み込みに応じて何らかの処理を設定することができる）
//JavaScript で changeImg の src 属性を変更する
reader.onload = function (ev) {
//FileReader オブジェクトを作成し、 load イベントのリスナーを作成し、ファイルが読み込まれるとその result を取得し、提供されたコールバック関数を read() に渡すことによって機能します。
//target は Event インターフェイスの読み取り専用プロパティで、イベントが配信されたオブジェクトへの参照
const changeImg = document.querySelectorAll('.changeImg').forEach(v => v.style.height = "90px");

.setAttribute('src', ev.target.result);
.height = '90px';
.width = '90px';
};
//指定したBlob型かFIle型のファイルを読み込んで、result属性にファイルのurlを格納
//今回は選択できるファイルはひとつだけなので、files[0]を指定
reader.readAsDataURL(this.files[0]);
}
</script>

[yambejp]

うけとったfileをimgタグにサムネイルで表示したのでしょうか？
全体的にこなれてないと思います
そもそもimgには最初かstyleが設定されているわけですからjsで上書きする意味がないと思います

[homepage-site]

yambejp さん回答ありがとうございます。
実のところこの処理以外にも拡張子をチェックする処理もあるためうけとったfileをそのまま表示する展開にはならなさそうです…
style はここで設定するよりもチェックした際に設定するようにしてみます。