Inside Technique : Using Dynamic Expressions : Style based on Content

This is a really fun and poweful technique. All the element's content are available to your expression. This allows you to customize the style and even modify content based on the raw content in your document. An example of this techinque is to format all the negative numbers in a table. Below is an unformatted table we will use in this example:

Deposit	500
Check #23	-125
Check #25	-122

Below, using the exact same HTML, we use a dynamic expression in the value column. This expression customizes the formatting and presentation of all the negative numbers.

Deposit	500
Check #23	-125
Check #25	-122

To create this effect we apply an expression to the CSS color attribute of the table cell. This expression checks if the contents of the cell are less than 0. If so, we change rewrite the contents and change the color to darkred. Below is the HTML, Style, and Script we use to create the effect:

<SCRIPT>
function checkValue(el) {
	if (parseInt(el.innerHTML)<0) {
		el.innerHTML = "(" + Math.abs(el.innerHTML) + ")"
		return "darkred"
	}
}

</SCRIPT>

<STYLE>
#accounts TD {color: expression(checkValue(this))}
</STYLE>
<TABLE ID=accounts><TR>
<COL><COL STYLE="text-align: right">
<TD>Deposit</TD><TD>500</TD></TR>
<TR><TD>Check #23</TD><TD>-125</TD></TR>
<TR><TD>Check #25</TD><TD>-122</TD></TR>
</TABLE>

This demonstrates that all of the DHTML object model is available to your expression. You can manipulate the contents with the full flexibility of the DHTML object model. However, as with this example, you should use Dynamic Expressions only for straightforward logic. The more complex your expression the greater potential you have for slowing down your web-page.

Next we demonstrate how to examine the document's structure to apply different styles. The document's structure refers to the relationship between the HTML elements in your document.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.