style.borderWidth = '2px'; // the border is 2px
You can even use shorthand CSS properties via JavaScript:
element.style.border = '1px solid blue';
element.style.background = 'red url(image.gif) no-repeat 0 0';
Animation effects can be achieved by incrementally changing an element??™s style properties
over time (this is covered in greater detail in Chapter 6).
The class Attribute
To avoid confusion with JavaScript classes, the class attribute is referred to using className.
You saw this in the getElementsByClassName() created earlier:
element.className = 'myclass';
CHAPTER 2 n HTML, CSS, AND JAVASCRIPT 33
Do not underestimate the power of applying a class name instead of changing style properties.
Much of the Ajax interaction that you??™ll delve into later involves creating new elements
on a page. Trying to apply multiple styles using the style attribute would quickly become
cumbersome. Save yourself some time and define a class selector in your style sheet. Then,
when the new element is added to the DOM, set the className attribute, and the element will
be styled accordingly.
Let??™s go through a quick example for error handling. Here is some sample CSS that will
show some red text in a rather large font:
.error { color:red; font-size:3em; }
If you detect an error in the form, you might decide to display an error message in the
document instead of displaying an ugly and intrusive alert:
document.
Pages:
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81