| Previous: Cross-Browser DHTML Example | Next: Summary |
If you've worked through the previous sections of this chapter, these last few pages should be a cakewalk. Now that you've seen how to change the CSS Positioning elements, changing regular CSS elements using a script should be simple.
And it is, unless you want to do it in Netscape 4. That can't really be done, because Netscape 4 doesn't support dynamic rerendering of elements on pages like Internet Explorer 4 and higher does. It so happens that Netscape 6 has been updated with this capability, however, so you'll find that the ability to change styles using scripts is supported in both those later browsers.
By the way, we're discussing the scripting of CSS1—CSSP capabilities are considered part of the CSS2 standard. CSS1 is the CSS standard that includes the style sheet properties discussed in Chapter 10—font, text, border, and similar properties. In this section we'll look at scripting basic CSS1 properties in IE 5.5 and higher, Netscape 6, and other compatible browsers.
With what you already know about scripting style properties, scripting CSS1 properties is straightforward. Take this example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Image Demo</title>
</head>
<script type="text/javascript">
<!--
function changeText (p) {
p.style.color="red";
}
// -->
</script>
<body>
<p onmouseover="changeText(this)">Test 1</p>
<p onmouseover="changeText(this)">Test 2</p>
</body>
</html>
When you place the mouse pointer over either of these paragraphs, the text turns red. Using the simple p.style.color="red"; assignment, the style of the received element pointer is changed.
You can experiment with nearly any style in CSS1 and change properties in this way. Because most property values are strings, you'll find that you can even accept entries from the user for the property values and then assign them, as in Listing 13.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Text Color</title>
</head>
<script type="text/javascript">
<!--
function changeBack () {
var theColor = document.forms[0].myColor.value;
alert (theColor);
document.getElementById("myPara").style.color = theColor;
if (theColor == "white") document.body.style.backgroundColor = "black";
}
// -->
</script>
<body style="background-color: gray">
<form name="form1">
<p id="myPara">What color would you like the text?</p>
<input type="text" name="myColor" /> <br />
<input type="button" value="Change It" onClick="changeBack()">
</form>
</body>
</html>
In this example, the user can enter a color in the myColor input box and then click the Change It button. When the button is clicked, the changeBack() function is called. In the function, the color name entered by the user is assigned to a variable (theColor), and then the style of the paragraph of text is assigned to the value of the variable. The function will also check if the new foreground color is white; if it is, it changes the background color to black so that the text can still be read.
NOTE
This script should work, but it's a bit oversimplified because it doesn't account for a user who enters an invalid color name. If you were really going to implement this script, you might use a <select> element to limit the color choices to valid color names, or you might create another function that tests the user's entry against valid color names.
In the previous section, you saw that you can change the individual properties of elements, regardless of whether or not they've been predefined with other style properties or even been assigned classes. But what if you want to change an element's class ID itself, so that the element changes a number of different properties dynamically? This is easily done, in both Internet Explorer and Netscape, using a script such as the one shown in Listing 14.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Classes</title>
<style>
.big {font-size: 36; color: red}
.small {font-size: 12; color: black}
</style>
<script type="text/javascript">
<!--
function changeClass () {
theClass = document.getElementById("myPara").className;
alert (theClass);
if (theClass != "big") {
document.getElementById("myPara").className = "big";
}
else document.getElementById("myPara").className = "small";
}
// -->
</script>
</head>
<body>
<form name="form1">
<p id="myPara" class="small">What class would you like assigned to this text?</p>
<input type="button" value="Change It" onClick="changeClass()" />
</form>
</body>
</html>
In this case, when the user clicks the Change It button, the function is invoked. It then determines the current class name that's being used with the paragraph and assigns it to theClass. Next, it checks if theClass does not equal big. If it doesn't, it is assigned the class big; if it does, it is assigned the class small. In this way, the script is able to compensate for either choice and switch between them repeatedly as the user clicks the button.
Figure 12 shows this script in action.
Figure 12 On the left, the page before clicking the button; on the right, the page after clicking has changed the class of the targeted paragraph.
| Previous: Cross-Browser DHTML Example | Next: Summary |
){kind=link}