【jQuery】特定の横幅になったらクラスを追加・削除する簡単な方法 | Kansuke program noteレスポンシブデザインのサイトを実装する際に、CSSにメディアクエリを書き込んで特定の横幅の場合は表示を変えたりしますよね。 メディアクエリだけで対応できれば良いのですが、中にはメディアクエリだけでは対応が難しい場合もあります。 そんな時は、特定の画面幅になった時だけbodyタグに特定のクラスをつけられると、全体の構成を一気に変えられて楽だったりします。 ということで、今回はそんな感じのスクリプトをjQueryで実装する方法をご紹介します。 スクリプトの実装例 今回は画面幅が600px以下になったらbodyタグに「sp-change」のクラスを付けるスクリプトを作りました。 スクリプトの内容は下記になります。 const CHANGE_WIDTH = 600; // 変更を検知する横幅 const ADD_CLASS = "sp-change" // 追加するクラス $(window).on
