JavaScript And DHTML Cookbook [Electronic resources] نسخه متنی

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.

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.