DigitalBonsai

Shaping the Web

Happiness is in the doing.

Change heading color (DHTML)

This page is experimenting with altering classes and styles dynamically. The red asterick indicates what is currently being used. Note that heading2 is semi-transparent so whatever color or class is selected, it will show as a tint, and not the true color. The background color behind will blend in with it.

The following edits the css background attribute to heading2 directly. element.style.cssText was used for the style change.

Color HEX value in rrggbb or rgb form (do not use leading # sign):
#
Adjust RGB (changes when all three colors are set)
Red: Green: Blue:


Changing CSS class on the fly.

The following links change the class which determines the header's background color (class attached to id=heading2). Four classes were created to pick from: heading-red, heading-green, heading-blue and heading-black. Odd quirk in IE. Sometimes the horizontal stripe background appears. Sometimes it doesn't. Firefox and Safari behave as expected.

red | green | blue | black