Styling with JavaScript

One of the most popular uses of JavaScript is to change the styling present on a page. Form something as simple as the width of a div to something as complex as changing the position of a div based on the client's mouse pointer you can change any facet of element styling with script.

While reading this section you will inevitabley wonder why a web developer would not just use plain CSS to accomplish the examples below. This page exists to help break the subject into smaller components.

These examples below are not typical "real world" uses of JavaScript. They exist to show how JavaScript can interface with page styling so that we can know how to do it in future sections that *will* use more applicable examples.


var color = 0;

function js_function() {
	if( color == 0 ){
		color = 1;
    	document.getElementById("button_id").style.backgroundColor = "lightblue";
    } else {
    	color = 0;
    	document.getElementById("button_id").style.backgroundColor = "pink";