Section B. Changing classes and ids

B. Changing classes and ids

JavaScript allows you to change the class or id of an element. When you do that, the browser automatically updates the styles of the element.

After the welter of tricky details and browser differences we encountered while discussing the style property, class and id changes are a quiet oasis of logic and perfect browser harmony. Consider this example:

p {     color: #000000; /* black */ } p.emphasis {     color: #cc0000; /* red */ } <p >Test</p> 

Classname, not Class!

Note that JavaScript uses className, because class is a reserved word, kept apart for a future in which JavaScript might start to support Java-like classes.

Initially, the paragraph doesn't have a class, and its color is therefore black. However, one line of JavaScript is enough to change its styles:

document.getElementById('test').className = 'emphasis'; 

Instantly the text becomes red. To change it back, you do the following:

document.getElementById('test').className = ''; 

You remove the class, and the paragraph reverts to the standard p{} rule.

For a practical example, take a look at Textarea Maxlength. The counter has this structure and presentation (the structure is generated by JavaScript, but that doesn't matter):

<div ><span>12</span>/1250</div> div.counter {     font-size: 80%;     padding-left: 10px; } span.toomuch {     font-weight: 600;     color: #cc0000; } 

When the script sees that the user has exceeded the maximum length, it changes the class of the counter span to toomuch:

[Textarea Maxlength, lines 20-23]

if (currentLength > maxLength)     this.relatedElement.className = 'toomuch'; else     this.relatedElement.className = ''; 

Now the counter <span> becomes bold and red.

An id change works exactly the same way:

p {     color: #000000; /* black */ } p#emphasis {     color: #cc0000; /* red */ } <p>Test</p> document.getElementsByTagName('p')[0].id = 'emphasis'; 

Again, the paragraph becomes red. Nonetheless, I advise you not to change ids too much. Apart from serving as CSS hooks, often they are also JavaScript hooks, and changing them may have odd side effects. In practice you can implement every CSS modification you need as a class change, and you don't have to work with ids.

Adding classes

Often you do not set the class of an element to a new value. Instead, you add a class value, because you don't want to remove any styles the element might already have. Since CSS allows for multiple classes, the styles of the new class are added to the element, without removing any instructions that already-existing classes give it.

The writeError() and removeError() functions of Form Validation are good examples. I generally use a few classes for form fields, because the graphic design often uses two or even three widths for input fields. When a form field contains an error, I want to add a special warning style, but I don't want to disturb any style that the element might already have. Therefore, I cannot simply overwrite the old class value; I'd lose my special widths.

Take this situation:

<input  name="name" /> input.smaller {     width: 75px; } input.errorMessage {     border-color: #cc0000; } 

Initially, the input has a width of 75px. If the script sets the class to 'errorMessage' and discards the old value, the form field would get a red border color but lose its width, and that would be very confusing to the user.

Therefore I add the class errorMessage:

{Form Validation, lines 105-106]

function writeError(obj,message) {     obj.className += ' errorMessage'; 

This code takes the existing className and adds the new class to it, preceded by a space. This space is meant to separate the new class value from any class value the object might already have. Now the form field gets a red border color in addition to its 75px widthexactly what we want. The form field now applies both classes, as if the HTML were:

<input  name="name" /> 

Class Names and Spaces in Mozilla

You may have noticed that removeError() removes the class value "errorMessage" without the leading space. That's because of a browser bug. When you add " errorMessage" to a class that doesn't have a value yet, Mozilla discards the leading space. If we subsequently do replace(/ errorMessage/,''), Mozilla doesn't remove the class; it can't find the string " errorMessage" because the leading space is not there.

Removing classes

Once the user has corrected her mistake, the class errorMessage should be removed, but any original class, such as smaller, should not be touched. The removeError() function provides this functionality:

[Form Validation, lines 119-120]

function removeError() {     this.className = this.className.replace(/errorMessage/,''); 

It takes the class of the element and replaces the string 'errorMessage' by '' (an empty string). The "errorMessage" bit is taken from the class value, but other values are not touched. The form field loses its red border color, but retains its 75px width.