javascriptでcssのクラス変更

Question

現在javascriptを勉強中の身で自分のポートフォリオサイトを作っていましてそこである横幅のサイズウインドウになったらcssのスタイルを変更したいなって考えて調べて自分なりに作ってみたのですがうまくいきません。

    var windowWidth = $(window).width();
    var windowSm = 767;
    var changeClass = document.getElementById('left-box-1');
    
    if(windowWidth <= windowSm)
    {
        // 横幅767px以下のとき
        changeClass.className = "right-box-1";
    }else{
        changeClass.className = "left-box-1";
    }

このコードは横幅が767px以下のときにleft-box-1というクラスをright-box-1というクラスに変更するということでそれ以外のウインドウ幅の場合最初のクラス名のleft-box-1というものにしておくというものなのですがうまく動作しません。

どなたかご教授の方よろしくお願いいたします

Answer 1

ある横幅のサイズウインドウになったらcssのスタイルを変更したいな

CSSのメディアクエリでviewportの横幅に応じて、スタイルを変えるのが良いと思いますが、JavaScriptの勉強ということでしたので、以下はJavaScriptで対応する一例です。(jQueryに置き換えてください）

window幅の変更に応じて何らかの処理を行いたい場合は、windowサイズの変更をwindow.resizeイベントを監視する必要があります。

また、windowのリサイズイベントはかなりの高頻度で発火してしまうため、windowサイズの変更に応じて何らかの処理を実行したい場合は、発生するイベントを間引いてあげます。以下のコードではLodashというライブラリのthrottleメソッドを利用して、発生するイベントを間引いています。

Lodashを利用するのであれば、jQueryのようにライブラリを読み込んであげる必要がありますので、読み込み方を調べて使ってみてください。

<div id='container' class='small'>Hello World</div>

.small {
  font-size: 12px;
}

.big {
  font-size: 24px;
}

var container = document.getElementById('container');

function handleWindowResize(event) { 
  
    var windowOuterWidth = event.target.outerWidth;
    
    console.log('window is resized!');
  
    if (windowOuterWidth >= 767) {
      container.className = 'big';
    } else {
      container.className = 'small';
    }

}

window.addEventListener('resize', _.throttle(handleWindowResize, 100));

参考

resize
jQuery - resize()
Lodash
lodashの_.throttleと_.debounceの使用例 - Qiita

Answer 2

htmlもcssもないのでなんとも言えませんが、
付与したい先はクラスですよね？

 var changeClass = document.getElementById('left-box-1');

getElementById()でID指定で取得しようとしています。
getElementsByClassName()では？

Answer 3

class_list で追加削除自由自在ですね。

また クラスが指定されてるものすべてなら

最近のクラス取得は document.querySelectorAll(".classSelector") ですな

Answer 4

こんばんは！

クラスを取得したいのならdocument.getElementByIdではなくてdocument.getElementsByClassNameですよ。