Removing visual effects on request using DHTML

This is an important notice about Something.

To highlight, or not to hightlight?

It occurred to me that it seems to be fairly easy to make visually strong elements turn into normal elements or disappear. The need for such effects arises when we wish to do everything possible to convey an important message, yet let the user then read the rest of the page without being distracted by large print, bright colors, blinking, colorful image, etc.

The hiding technique

If you put such an element inside a div element and use
onclick="this.style.visibility = 'hidden'"
then clicking on it removes it from the page without changing the layout. You could alternatively set
onclick="this.style.display = 'none'"
but then the browser would have to reformat the page when the element is removed from display.

Naturally the user would need to be informed about such a possibility, but a short textual note about this in the notice itself should suffice. It should be JavaScript-generated for obvious reasons. View the source file of this page for an example.

Limitations

Not all JavaScript-enabled browsers support the onclick attribute in div elements or the other constructs used, but in practice this would seem to be a pragmatic approach. It could hopefully be refined by making the creation of the instruction string more conditional.

Modifications

Alternatively you could use the same approach in order to change the visual effects (like background color) without removing the notice text itself. This may take some more code, if several presentational features have been used for highlighting the notice.

To simplify changing the properties of an element (such as background and text color and font size), you could make the onclick handler change the class of the element. Then you would have two sets of CSS settings, one for the element as such without the class attribute and one for the element with the class attribute.

Jim Ley, the author of the comp.lang.javascript FAQ, has commented that in generating the note with javascript, the problem is that abilities to change style and write content are not tied together. He described the following approach:

document.write('<span id=chicken'+
'style="display:none">message</span>');
chk=document.getElementById('chicken');
if (chk && chk.style) {
 chk.style.display='block';
}

This is based on the idea that if you can display a block, you'll also be able to hide the other one.