12.3 Changing Text Style Properties

NN 6, IE 4

12.3.1 Problem

You want to alter the style of some text already displayed on the page.

12.3.2 Solution

Change one or more of the associated style properties of the element containing the text, as in these examples:

elementReference.style.color = "00ff00";
elementReference.style.font = 
    "bolder small-caps 16px 'Andale Mono', Arial, sans-serif";
elementReference.style.fontFamily = "'Century Schoolbook', Times, serif";
elementReference.style.fontSize = "22px";
elementReference.style.fontStretch = "narrower";
elementReference.style.fontStyle = "italic";
elementReference.style.fontVariant = "small-caps";
elementReference.style.fontWeight = "bolder";
elementReference.style.textDecoration = "line-through";
elementReference.style.textTransform = "uppercase";

12.3.3 Discussion

Many CSS properties affect the appearance of text on the page. Most of the CSS2-standard properties are implemented in IE 6 and NN 6, with occasional proprietary properties also available. Because all implemented CSS properties can be controlled via properties of the style object associated with an element, those CSS properties can be modified after the page has loaded (in IE 4 or later and NN 6 or later).

Before you can modify the appearance of text, that text must be its own element, even if it is merely an arbitrary span within a larger element. See Recipe 15.2 for an example of converting a user text selection into an element ready for text style modification.

Note that to comply with JavaScript (and other) language rules, the CSS property names that contain hyphens are converted to intercapitalized style words. Thus, the DOM reference for the font-weight CSS property is fontWeight. Values assigned to these properties are always strings, and the constant values are identical to those assigned to CSS properties, including those with hyphens. Values that denote length, such as the fontSize value, must also include the units (e.g., 22px). Table 12-1 lists each property and the types of accepted values.

Table 12-1. Text style properties and values

Property	Description
color	Foreground color specified as hexadecimal triplet (e.g., #ff00ff), CSS RGB value (e.g., rgb(255,0,255) or rgb(100%,0%,100%)), or color constant (e.g., green)
font	Combination property with one or more of fontFamily, fontSize, lineHeight (which must be preceded by a / symbol in this property), fontStyle, fontVariant, and fontWeight or a constant: caption, icon, menu, message-box, small-caption, or status-bar
fontFamily	Comma-delimited list of font families in decreasing priority; multiple-word family names must be quoted inside the string value
fontSize	Length value representing the height of the characters (fixed size with unit measure or percentage), relative size (larger or smaller), or constant: xx-small, x-small, small, medium, large, x-large, or xx-large
fontStretch	Character spacing governed by a constant: normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, or none
fontStyle	Slant of text characters governed by a constant: normal, italic, or oblique
fontVariant	Small-caps version of font: normal or small-caps
fontWeight	Boldness of the characters: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, or 900
textDecoration	Extra ornament for the text: blink, line-through, none, overline, or underline
textTransform	Case transformations of the text: capitalize, lowercase, none, or uppercase

Additional style properties can also affect the overall appearance of a text-centric element. The element's background color (backgroundColor style property) can have significant impact on the view and readability of a text span. Other text-related style properties, such as textAlign and textIndent, operate in block-level elements that contain text.

If you want to animate the transitions between states in any way, including alternating between states, you need to use setTimeout( ) or setInterval( ) to allow the animation to be visible. If, instead, you simply script a sequence of style changes, be aware that the browsers tend to delay refreshing the screen until the current script thread finishes. This speeds up the rendering of multiple style property changes and makes them appear all at once, rather than seeing each property change individually. For example, if you wish to momentarily alternate the background color of an element to bring the viewer's attention to it, you can set up a function that invokes itself several times through the setTimeout( ) mechanism. Each time the function runs, it changes the background color of the element whose ID is initially passed as a sole parameter to the function:

function flashBkgnd(elem, count) {
    // if counter is null, initialize at zero
    count = (count) ? count : 0;
    // grab value once for multiple comparisons
    var currColor = document.getElementById(elem).style.backgroundColor;
    if (currColor =  = "rgb(255,255,0)" || currColor =  =  "#ffff00") {
        document.getElementById(elem).style.backgroundColor = "#ff0000";
    } else {
        document.getElementById(elem).style.backgroundColor = "#ffff00";
    }
    if (count < 10) {
        // call this function again in 1/10 sec., with incremented counter value
        setTimeout("flashBkgnd('" + elem +"'," + ++count + ")", 100);
    } else {
        // assumes a white body background
        document.getElementById(elem).style.backgroundColor = "#ffffff";
    }
}

This function maintains its own internal counter, passing the incremented value as a second parameter to the function for subsequent function calls. Once the counter reaches its maximum value, the background color of the element returns to a default value. You could also use a version of Recipe 11.12 to determine the effective background color of the body element, and set the flashing element's background color to that value upon exiting the function the final time.

Note, too, that in the flashBkgnd( ) function, the current color is tested in two forms: a CSS rgb(x,y,z) value and a hexadecimal triplet value. This is necessary because some browsers (Netscape 6 in particular) report color values in the RGB format, regardless of the value assigned to the property elsewhere.

12.3.4 See Also

Recipe 12.2 for special hover behaviors for hyperlinks; Recipe 4.5 for usage of setTimeout( ) as a delay mechanism; Recipe 11.12 for reading effective style sheet values; Recipe 15.2 for converting a user selection into a style-modifiable arbitrary element.