リサイズ中だけスタイルを適用する方法

サンプルコード

リサイズ中だけ、背景色を赤にするサンプルコードです。

.active {
	background-color: red ;
}

var timeoutId ;

window.addEventListener( "resize", function () {
	// element = <div></div>
	element.classList.add( "active" ) ;

	clearTimeout( timeoutId ) ;

	timeoutId = setTimeout( function () {
		element.classList.remove( "active" ) ;
	}, 500 ) ;
} ) ;

デモ

リサイズ中に枠内の黄色い部分が赤くなるか確認して下さい。

var timeoutId ;

window.addEventListener( "resize", function () {
	element.classList.add( "active" ) ;

	clearTimeout( timeoutId ) ;

	timeoutId = setTimeout( function () {
		element.classList.remove( "active" ) ;
	}, 500 ) ;
} ) ;

関連記事

リサイズ中か否かを判定する方法

ユーザーがリサイズ中か否かを判定するには、resizeイベントとsetTimeout()を利用します。

スクロール終了時に処理を実行する方法

スクロールを停止したタイミングで処理を実行するには、setTimeout()を利用します。

リサイズ終了時に処理を実行する方法

リサイズを停止したタイミングで処理を実行するには、setTimeout()を利用します。

2点の座標の中点を求める方法

2点の座標の中点を求める公式を、JavaScriptで表現します。

スクロール中だけスタイルを適用する方法

スクロール中だけスタイルを適用するには、classListとsetTimeout()を利用します。

ドラッグオーバー中だけスタイルを適用する方法

ドロップできる要素にドラッグオーバー中だけスタイルを適用するには、dragoverイベントと、setTimeout()を組み合わせましょう。