javascriptによるcssスタイルの変更

Question

javascriptでcssスタイルを操作してoverflowを適用したり、非適用状態にしたり切り替えを行いたいです。

この部分が上手く行きません↓

    if (Scroll_check.checked){
        for(i=0;i<Scroll.length;i++){
            Scroll[i].style.overflow  = "auto";
          }
    } else {
        for(i=0;i<Scroll.length;i++){
            Scroll[i].style.overflow  = "";
          }
    }

バックグラウンドカラーの変更にしてみると正常に動作します。

    if (Scroll_check.checked){
        for(i=0;i<Scroll.length;i++){
            Scroll[i].style.backgroundColor  = "white";
          }
    } else {
        for(i=0;i<Scroll.length;i++){
            Scroll[i].style.backgroundColor  = "black";
          }
    }

Comments

[itagagaki]

他者がその現象を再現することができるHTML, CSS, JavaScriptのコードを示してください。

Answer 1

HTMLがどうなっているか次第ですが

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#Scroll_check').addEventListener('change',e=>{
    document.querySelectorAll('.Scroll').forEach(x=>{
      x.style.overflow=e.target.checked?"auto":"";
    });
  });
});
</script>
<label><input type="checkbox" id="Scroll_check">Scroll_check</label><br>
<div class="Scroll">1</div>
<div class="Scroll">2</div>
<div class="Scroll">3</div>
<div class="Scroll">4</div>

Answer 2

（ループ内で比較しているので効率が悪いですが）

for (let s of Scroll)
  s.style.overflow  = Scroll_check.checked ? 'auto': 'initial';