Jan's Web Scripting Demo:
Change Style

The attributes and properties of any element or of the whole page can be changed in response to an event. HTML elements have a number of attributes like SRC, ID, CLASS, and STYLE. On the previous page, Change Image, the examples used JavaScript to change the SRC attribute for an image.

On this page we will see how to use the STYLE attribute to change properties, like color, background-color, position, font-family, font-size, width, and height.

To change a style property of an element with a script you must access the STYLE object first. The general form is:

document.getElementById('myid').style.propertyName= "new value";

Tip: If your script is not behaving as you expected, check for a missing 'style' part.

For example,

• document.getElementById('myid').style.fontSize="large";
• document.getElementById('myid').style.color="navy";
• document.getElementById('myid').style.backgroundColor="#336699";
• document.getElementById('myid').style.width="400px"
• document.getElementById('myid').style.height="200px";

---

CSS names vs. JavaScript names

CSS has many properties whose names combine two words with a hyphen.

JavaScript does not allow hyphens in names. To refer to these properties in a script you must drop the hyphen and use a capital letter for what followed the hyphen in the CSS name.

This difference is a common cause of typing errors.

CSS name	JavaScript name
font-size	fontSize
background-color	backgroundColor
border-width	borderWidth
text-align	textAlign

---

Change Style with onMouseOver event

Try it: Move your mouse over each of the colors in the list or tap the color on a touchscreen. The Example DIV changes color.

• Red
• Orange
• Yellow
• Green
• Blue
• Purple

    Reset color

To accomplish this task you need three things:

1. ID for DIV element

   <div id="examplediv">

   The original color for the DIV is set in the STYLE section in the HEAD of the page's source. It could be set in an inline STYLE in the tag.

   Tip: It often seems to work better to set a specific value for any property that you plan to change with a script, instead of letting the browser use the default value for the property.

2. Script to change the background color for the DIV

   <script>
   function changecolor(mycolor)
   {document.getElementById("examplediv").style.backgroundColor= mycolor;
   }
   </script>

   In the script the term mycolor stands in for the actual color you write when the function is called. Writing changecolor('red') would apply the color red as the background.

3. Event Attribute for each color in the list:

   <ul>
   <li><span onMouseOver="changecolor('red')">Red</span></li>
   <li><span onMouseOver="changecolor('maroon')">Maroon</span></li>
   <li><span onMouseOver="changecolor('yellow')">Yellow</span></li>
   <li><span onMouseOver="changecolor('green')">Green</span></li>
   <li><span onMouseOver="changecolor('blue')">Blue</span></li>
   <li><span onMouseOver="changecolor('orange')"></span>Orange</li>
   </ul>

Tip: To return the background color to the original, instead of a function attached to the onClick attribute of the Reset button, you could call the function from the matching onMouseOut event for each onMouseOver.

Tip: The example script puts the text inside a SPAN tag to keep the hotspot from extending all the way across the page.

---

This same method can be used to access any style property and change its value. Just watch your spelling and capitalization. Javascript will NOT try to figure out what you meant to say!