Dynamic Styles | Programming Microsoft Visual InterDev 6.0

Dynamic styles allow you to dynamically change the style of any HTML element in a document. You can change colors, typefaces, spacing, indentation, position, and even the visibility of text.

As a simple example of what can be done with dynamic styles, take a look at the code in Figure 7-3. This code comes from the DynamicStyles.htm document in the Chap07 folder on the CD-ROM.

Figure 7-3. DHTML code that changes the font size and color of a text element as the mouse moves over it.

 <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE>Dynamic Styles</TITLE> <SCRIPT LANGUAGE="JScript"> function doChanges() {     window.event.srcElement.style.color = "green";     window.event.srcElement.style.fontSize = "20px"; } </SCRIPT> </HEAD> <BODY> <H3 ID=heading onmouseover="doChanges()"      STYLE="color:black;font-size:18">     Dynamic HTML - Dynamic Styles Example</H3> <HR> <P>This sample changes the font size and color when      you move the mouse over the heading. </BODY> </HTML>

When you run this code example within Visual InterDev 6.0, you'll see that the font size and the color of the text element changes as you move the mouse over it. The text element has been given an ID of heading, and the mouse movement is trapped using the onmouseover event.

For another example, consider the code shown in Figure 7-4. This code is named DynamicStyles2.htm in the Chap07 folder on the CD-ROM.

Figure 7-4. DHTML code that changes the color of a text element as the mouse moves over it.

 <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE>Dynamic Styles</TITLE> <SCRIPT LANGUAGE="JScript"> function doChanges() {     window.event.srcElement.style.color = "red"; } </SCRIPT> <SCRIPT LANGUAGE="JScript"> function undoChanges() {     window.event.srcElement.style.color = "black"; } </SCRIPT> </HEAD> <BODY> <H3 ID=heading onmouseout="undoChanges()"      onmouseover="doChanges()" STYLE="color:black;font-size:18">     Dynamic HTML - Dynamic Styles Example</H3> <HR> <P>This sample changes the font color when you move the mouse      over the heading. </BODY> </HTML>

This example is similar to that shown in Figure 7-3, but it uses the onmouseout event to change the text color back to the original color. By trapping both the onmouseover and onmouseout events, the text appears highlighted when the mouse is moved over it. Using dynamic styles, you can achieve many special effects within the browser with just a small amount of scripting.