Accessing CSS Properties

You'll remember that when we made pop up menus in Beginning JavaScript, that we used JavaScript to access and dynamically change a <div> box's "visibility:" property. The "visibility:" property is a CSS property that can by dynamically changed with JavaScript. It is not alone. Almost all CSS properties can be accessed and dynamically changed using JavaScript.

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 getElementById Model

If you review the pop up menu tutorials in Beginning JavaScript, you'll see that all modern browsers (IE 5+, Netscape 7, and Opera) use the"document.getElementById" reference to refer to the CSS property "visibility:" of a given <div>. This same reference is used to access other CSS properties as well. The generic form of the JavaScript reference 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.

I initially styled 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>

You should recognize all of the CSS styling above. If not, review Advanced CSS. 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:

<script language="JavaScript">

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

</script>

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";
}

Summary & Exercises

The "document.getElementById" object is a real breakthrough. You can use

"doucment.getElementById("div_ID").style.property_to_style = "value"

to style just about all CSS properties. Support for individual properties varies with browser, but most are supported by all modern browsers.

JavaScript refers to CSS style properties differently than CSS itself. JavaScript does not use hyphens and often uses capitalization instead. Proper capitalization is crucial in all JavaScript object references. For example, CSS refers to a <div> box's background color as "background-color". JavaScript refers to this property as "backgroundColor".

The values you assign to CSS properties in JavaScript are the same as you would use when coding CSS. Remember to put values in quotes unless they are pure numbers.

Take some time to make your own example with three or four dynamically styled boxes. Just use "backgroundColor", "borderColor", and "color" for the present. We'll be discussing other properties in the next tutorial.

To Next Beginning JavaScript Lesson

Back To Beginning JavaScript Index