;

DHTML

This page contains experiments in DHTML. Some of the most helpful information came from here...

Changing text and colour

Here are some routines which select a random colour word from a list stored in an array. The colour of the word is set to its meaning. The background is also randomly changed. The second row of buttons makes the repetition continuous with the rate of change adjustable.

       

word

Changing style sheets

This page has two attached stylesheets. The following button switches off one of them.

More information about changing stylesheets can be found here.

Changing a style using an ID

Here a technique is described to change a class within an id.

You can change the colour of this text by clicking the following button.

The real limitation of this technique is that only one usage of a class can be changed, the instance within the specified id.

Changing a style using multiple stylesheets

The above ("Changing a style using an ID") is useful for changing a class only if there is only one instance, appearing in a tag with id. However there will be lots of instances when it is required to change a class which occurs in multiple instances.

While it is possible to change an individual style element using javascript, it is complex and the amount of processing is substantial. Here is another technique involving the switching on and off of stylesheets. There are two style sheets each of which contain the required class. Naturally the last listed in the document will take precedence. However, by switching off the last one, the previous one in the list becomes the controlling one.

This technique can be used to store a set of style rules, each representing a single "state" of the page.

The next two lines have a class which is defined in two different stylesheets, sheet11 and sheet12. (There aren't actually that number of stylesheets; they have just been named this way for convenience.) Initially the last sheet in the list, sheet 12 (where the class species green text), is dominant. However, if it is switched off, then sheet11 (where the text is orange), is active. If then sheet11 is switched off the text reverts to the underlying sheet for the rest of the page and the text becomes black.

This is text with class teststyle.

This is text with class teststyle.

Changing a style within the