(JS)特定の要素内にあるimgタグのstyleをjavascriptで変更する方法

Question

Javascriptでidやclassを指定してstyleを変更する方法は分かるのですが、要素内にあるimgタグのstyleを変更する方法が分かりません。例えば下記のstyleをJavascriptで変更する場合はどう記述したらよいでしょうか？

#element img {
    width = 100px;
    height = 100px;
}

ご回答よろしくお願いいたします。

Answer 1

let img = document.querySelector('#element img') (対象要素が一つだけとわかっている場合) や for (let img of document.querySelectorAll('#element img')) { (対象要素が複数ある場合) としてから、img の style プロパティや classList プロパティを操作しましょう。

Answer 2

できないことはないですが、あまりおすすめできません

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.body.appendChild(Object.assign(document.createElement('style'),{innerHTML:'#element img {width:100px;height:100px;}'}));
});
</script>
<div id="element">
<img src="https://placehold.jp/ff0000/00000/10x10.png?text=1">
<img src="https://placehold.jp/00ff00/00000/10x10.png?text=2">
<img src="https://placehold.jp/0000ff/00000/10x10.png?text=3">
</div>