JS 要素の幅を取得しクラス名の付与

Question

前提・実現したいこと

画面幅ではなく要素の幅を取得し、○px以上の時と以下の時でクラス名の付与・削除を行いたいです。
いろいろ調べて書いてみたのですが正しく動作しません。

発生している問題・エラーメッセージ

<div class="box">
  コンテンツ
</div>
//この要素の幅が800px以上の時は`box-wide`を付与したい、800px以下の時は`box-wide`を削除

$(function () {
  $('.box').on('load resize', function(){
    var boxW = $(this).outerWidth(true);
    var devW = 800;
    if (boxW <= devW) {
      $(this).removeClass("box-wide");
    } else {
      $(this).addClass("box-wide");
    }
  });
});

Answer 1

要素のサイズの変更を監視するには ResizeObserver を使います。

.box {
  resize: both;
  overflow: scroll;
}

const box = $('.box');
new ResizeObserver(entries => box.toggleClass('box-wide', box.outerWidth(true) > 800)).observe(box[0]);

https://developer.mozilla.org/ja/docs/Web/API/ResizeObserver
https://blog.jxck.io/entries/2017-12-30/resize-observer-and-element-query.html

Comments

[crigw]

ありがとうございます。
結果的にこちらを使ったのですが、すでにベストアンサーを決めたあとだったため…すみません。
大変助かりました。

Answer 2

(boxW <= boxW) ← 変数名を変えましょう。

Comments

[crigw]

ご指摘ありがとうございます！修正しました。
ちなみに、動きません。

[kei344]

load resizeイベントが起こるのがwindowだからでは。

[kei344]

https://jsfiddle.net/5s8gLbwj/

[crigw]

うごきました！ありがとうございます！