【javascript】ウィンドウサイズによるクラス名の付与&削除する方法

2019.10.26 / 2020.11.19

CONTENTS

  1. 1.HTML
  2. 2.Javascript

レスポンシブサイトを作成するときに、画面サイズによって要素のクラス名を外したり、付与したりする方法をご紹介します。jQueryを使ってクラス指定をコントールしてみましょう。

HTML

<div id="colorBox" class="bluebox"><p>Red / Blue</p></div>

WordPressではget_the_category()というテンプレートタグを使えばカテゴリー情報を得ることができます。

記事を表示するループのなかに次のように書きます。

Javascript

<script type="text/javascript">
$(window).resize(function(){
var x = $(window).width();
var y = 640;
if (x <= y) {
$('#colorBox').addClass('redbox').removeClass('bluebox');
}else{
$('#colorBox').addClass('bluebox').removeClass('redbox');
}
});
</script>

ウィンドウサイズを「640px」を分岐点として、クラス名を切り替えています。

ポイント