Crash Course On jQuery - jQuery Example

Changing the body's background color using jQuery.

by Tony Le

HTML

<!-- OUR BUTTONS FOR CHANGING THE BACKGROUND COLOR -->
<button type="button" id="btn-red-bg">Red</button>
<button type="button" id="btn-blue-bg">Blue</button>
<button type="button" id="btn-reset-bg">Reset</button>

CSS

/* OUR INITIAL CSS RULES */
body {
  background-color: #fff;
}

JavaScript

// get the button with the id of btn-red-bg
// and when it is clicked on
$('#btn-red-bg').on('click', function() {
	// change the body's background color to red
	$('body').css('background-color', '#ff0000');
});

// get the button with the id of btn-blue-bg
// and when it is clicked on
$('#btn-blue-bg').on('click', function() {
	// change the body's background color to blue
	$('body').css('background-color', '#0000ff');
});

// get the button with the id of btn-reset-bg
// and when it is clicked on
$('#btn-reset-bg').on('click', function() {
	// change the body's background color back to white
	$('body').css('background-color', '#ffffff');
});