How to change class and id in JavaScript_javascript tips

It's className, not class

Note that JavaScript uses className to access the class attribute, because class is a reserved keyword, because in the future JavaScript may start to support classes like Java.

We encountered thorny details and browser differences when discussing the style attribute, which was like going through a stormy sea. The changes of class and id are like a calm oasis in the desert, where browsers live in harmony. Consider this example:

p {

color: #000000; /* black */

}

p.emphasis {

color: #cc0000; /* red */

}

Test

Initially, the paragraph has no class defined, so its font color It's black. However, a single line of JavaScript is enough to change its style:

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

In an instant the text turns red. If you want to change it back, you can do the following:

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

You have removed the style and the paragraph returns to the default p{} rules.

For a practical example, take a look at "Limited length text input area". The counter has this structure and rendering style (the structure is dynamically generated by JavaScript, but that doesn't affect this example):

12/1250

div.counter {

font-size: 80%;

padding-left: 10px;

}

span. toomuch {

font-weight: 600;

color: #cc0000;

}

When the script finds that the text entered by the user must have reached the maximum length , it modifies the class of as a counter to toomuch:

[Length-limited text input area, lines 20-23]

if (currentLength > maxLength)

this.relatedElement.className = 'toomuch';

else

this.relatedElement.className = '';

Now, the font of as counter changes in bold and red.

Change of id works almost exactly the same way:

p {

color: #000000; /* black */

}

p#emphasis {

color: #cc0000; /* red */

}

Test

document.getElementsByTagName('p')[0].id = 'emphasis';

The text of this paragraph turns red again. However, I recommend you not to change the id too much. In addition to being used as CSS hooks, they are also often used as JavaScript hooks, and changing them may have unspecified side effects.

Add class

Normally, you don’t set a new value for an element’s class, you just add a class. Because you don't want to remove any styles the element already has. Because CSS allows composite styles, the styles contained in the new class are added to the element without removing any CSS directives from the existing class.

The writeError() and removeError() functions in "Form Validation" are a good example. Generally I apply several classes to form fields because graphic designers often use two or even three widths for input fields. I want to add a special warning style when a form field contains an error, but I don't want to mess with the styles that the element already has. So, I can't simply overwrite the old class value, then I'll lose the width I've specified.

Look at this situation:



input.smaller {

width: 75px;

}

input.errorMessage {

border-color: #cc0000;

}

Initially, the width of the input box is 75px. If the script sets the class to 'errorMessage' and deletes the old value, the form field will get a red border but also lose its width, which can be very confusing to the user.

Therefore, I added the errorMessage class:

[Form validation, lines 105~106]

function writeError(obj,message) {

obj.className = ' errorMessage';

This code gets the existing className and appends a new class after it, adding a space before it. This space separates the new class from any class values ​​the object may already have. Now the input box has a red border as we expected, in addition to being 75px wide. The form field now has two classes applied, and the HTML looks like this:



Class name in Mozilla with a blank

You may notice removeError( ) There is no leading space when removing the value of class errorMessage. That's because of a browser bug. When you add errorMessage to a class that originally had no value, Mozilla removes the leading spaces. If we then execute replace(/ errorMessage/,''), Mozilla cannot remove the class because it cannot find the string errorMessage because the leading spaces are no longer there.

Remove class

Once the user fixes her error, the value of class errorMessage should be removed, but any original class, such as smaller, should not be affected. The removeError() function provides this function:

[Form validation, lines 119-120]

function removeError() {

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

It first gets the class of the element and then replaces the string 'errorMessage' with '' (a null character). errorMessage is taken from the value of class, but has no effect on other values. The form field loses its red border color, but still maintains a width of 75px.