Flash

Flash a DOM Element

Introduction

The flash() script briefly changes the background color of a DOM element and then changes it back. I have used it to "flash" an element to confirm a change made by the user. I have also used it on input elements when a user's entry has been accepted if there isn't any other visual aid.

Demo

Below is a demonstration of flash. It briefly changes the background of the test flash element to draw attention to it. I have also used it to signal the user that something was done.

Script

Copy

<script>
/**
 * Flash a document element by briefly altering background color.
 *
 * Usage:
 *   <button onclick="flash(this);doAction();">Action</button>
 */

flash.Color = '#6699CC';
flash.Duration = 40;		// milliseconds

function flash(e,color,duration) {
	if (! e || ! e.style) return;
	color = color ? color : flash.Color;
	duration = duration ? duration : flash.Duration;
	var begin_color = e.style.backgroundColor ? e.style.backgroundColor : '';

	e.style.backgroundColor=color;
	setTimeout(function(){e.style.backgroundColor=begin_color;}, duration);
}
</script>