Look at this example. When you hover over the box, the border, background color, and foreground colors change. This is caused by JavaScript dynamically changing the box’s CSS properties much like it does the “visibility:” property in pop up menus. This opens a whole new world of dynamic styling opportunities as most CSS properties can be accessed.

The generic form of the JavaScript reference to change a CSS property is:

document.getElementById("div_id").style.CSS_property_to_change = "new_CSS_value_in_quotes";

JavaScript does not always use the same term to refer to a property as CSS does. This is the biggest thing to keep in mind as you refer to CSS properties in JavaScript. Now lets start coding the example.

Making & Styling The Box

Begin by making a simple <div> box and styling it with CSS. My box’s HTML code is:

<div id="box1">
<h3>This is a dynamically styled box. Hover over this box to watch it change. (Doesn't work in early Netscapes)</h3>
</div>

The above is just a simple box with the ID of “box1″ and some text in an <h3> tag.

Initially style the box with the following CSS inside <style> tags on the page:

<style type="text/css">
#box1{
position: absolute;
top: 20px;
left: 50px;
width: 200px;
border: solid #ff0000 3px;
background-color: #ffff00;
color: #000000;
padding: 10px;
}
</style>

Now we have our basic box made. Lets change the styling with JavaScript.

Adding JavaScript Dynamics

The first stage in dynamically changing the box’s CSS styling is to determine what event I want to trigger the change. I used “onMouseOver” to trigger the change and “onMouseOut” to change the box back to its original styling. I used “change()” and “change_back()” as the names for my functions. Here’s the amended <div> tag for the box:

<div id="box1" onMouseOver=”change()” onMouseOut=”change_back()”>
<h3>This is a dynamically styled box. Hover over this box to watch it change. (IE only version)</h3>
</div>

Now for the fun part. The JavaScript code to make the dynamic changes. Remember that JavaScript doesn’t always use the same term as CSS to refer to a CSS property. Changing the box’s background color shows this. To change the background color in my “change()” function, I used:

<script language="JavaScript">
function change(){
document.getElementById("box1").style.backgroundColor = “#000000″;
}

First notice the term that JavaScript uses to refer to the CSS “background-color:” property. JavaScript uses “backgroundColor”. Make special note of the capital “C” in “Color”. There is no hyphen as is common in CSS. Proper capitalization is crucial.

This is just like using the “visibility:” property in pop up menus. The key is in knowing what JavaScript calls various CSS properties. The next tutorial will provide a complete list. Moving on with our example, we’ll add the code that will change the border color and foreground color:


function change(){
document.getElementById("box1").style.borderColor = “#0000ff”;
document.getElementById(”box1″).style.backgroundColor = “#000000″;
document.getElementById(”box1″).style.color = “#ffffff”;
}


JavaScript uses “borderColor” for CSS’s “border-color:” property, and “color” for CSS’s “color:” property. In general, single words, like “color” or “top” are the same in CSS and JavaScript. As a rule, hyphenated words in CSS are converted to JavaScript by removing the hyphens and capitalizing the first letter of the second an subsequent words. There are no spaces in the JavaScript references.

It’s best to use a reference table when starting out. Just remember that JavaScript never uses a hyphenated term as is common in CSS. Capitalization is often substituted for a hyphen.

Also note that all values used are in quotes. This follows standard JavaScript protocols. Only pure numbers can be used as values without quotes. If in doubt, use quotes.

The “change_back()” function, triggered by “onMouseOut”, is just like the “change()” function. The only difference is that the values assigned to the properties is different:

function change_back(){
document.getElementById("box1").style.borderColor = "#ff0000";
document.getElementById("box1").style.backgroundColor = "#ffff00";
document.getElementById("box1").style.color = "#000000";
}

The final Result.

Related posts:

1. MooTools Basic Tips for Web Designer (Lesson 1)
2. Adding external (Menu) JavaScript, CSS and Images in a project using CodeIgniter
3. MooTools Basic Tips (lesson 3): interaction with HTML Form
4. Ten CSS tricks you may not know