Dynamic Style Properties

This example shows how to dynamically change ANY individual style property of an HTML element.
Each link below triggers a dynamic change to the following div block.

I am just an ordinary div block in the page.

You will need to examine the source code to see exactly what the links below are doing.
But there is some general explanation below the links.

Click me to change the width of the block.

Click me to change the color and background-color style properties of the block.

Mouseover/out to toggle the block's visibility.

In general, here's how this works.
Consider ANY style property that CSS provides.
For example, the following CSS ID selector defines two style properties for a block whose ID value is block1.

    #block1 {
      font-family: 'Times New Roman';
      background-color: '#000000';
    }

Now suppose some user event calls a function that acquires the DOM object for the block.

   var myblock = document.getElementById('block1');

You can change individual style properties using JavaScript by doing the following.

   myblock.style.fontFamily =  'Verdana';

   myblock.style.backgroundColor =  '#FFFFFF';

Every DOM object has a style object as a property - myblock.style in the above code.
All CSS style properties are also properties of the JavaScript style object.
Hence ANY CSS property can be changed using JavaScript for dynamic effect.

You have to apply camel case when you go from the CSS property to the JavaScript object property.
You can see that in the above code, but here are a couple more examples.
The CSS style property text-decoration becomes textDecoration in JavaScript and the CSS style property border-top-left-radius becomes borderTopLeftRadius in JavaScript.
Camel case is used since the hypen (-) used in so many CSS properties is not a legal character for variable names in JavaScript.