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 might begin to support classes like Java.
When we discussed the style attribute, we had a problem with tricky details and browser differences, just as we experienced a stormy sea. The class and ID changes are like a tranquil oasis in the desert, where browsers live in harmony. Consider this example:
p {
Color: #000000; * Black * *
}
p.emphasis {
Color: #cc0000; /* Red *
}
<p id= "Test" >Test</p>
Initially, the paragraph does not define class, so its font color is black. However, a row of JavaScript is enough to change its style:
document.getElementById (' Test '). ClassName = ' emphasis ';
The instant text turns red. If you want to change back, you can do the following:
document.getElementById (' Test '). ClassName = ';
You remove the style, and the paragraph reverts to the default p{} rule.
For an example of a practical application, look at the "Long text entry area." Counters have such a structure and rendering style (the structure is dynamically generated by JavaScript, but that does not affect this example):
<div class= "Counter" ><span>12</span>/1250</div>
Div.counter {
font-size:80%;
padding-left:10px;
}
Span.toomuch {
font-weight:600;
Color: #cc0000;
}
When the script discovers that the user entered the text must reach the maximum length, it modifies the <span> class of the counter as Toomuch:
[Long text input area, line 20th to 23rd]
if (Currentlength > MaxLength)
This.relatedElement.className = ' Toomuch ';
Else
This.relatedElement.className = ';
Now, the <span> font as a counter becomes bold and red.
The change in ID works in almost exactly the same way:
p {
Color: #000000; * Black * *
}
p#emphasis {
Color: #cc0000; /* Red *
}
<p>Test</p>
document.getElementsByTagName (' P ') [0].id = ' emphasis ';
The text of the paragraph turns red again. However, I recommend that you do not change the ID too much. In addition to being a CSS hook, they are often used as JavaScript hooks, altering them with potentially indeterminate side effects.
Add Class
Typically, you do not set a new value for the class of an element, but simply add a class. Because you don't want to remove any style that the element already has. Because CSS allows for a composite style, the new class contains styles that are added to the element and do not remove any existing CSS directives from the class.
The Writeerror () and Removeerror () functions in form validation are a good example. I generally apply several classes to a form field because the graphic designer often uses two or even three widths for the input box. When a form field contains errors, I want to add a special warning style, but I don't want to disturb the style that the element already has. So, I can't simply overwrite the old class value, so I'm going to lose the width I've specified.
Look at a situation like this:
<input class= "Smaller" name= "name"/>
Input.smaller {
width:75px;
}
Input.errormessage {
Border-color: #cc0000;
}
In the beginning, the width of the input box is 75px. If the script sets class to ' errormessage ' and deletes the old value, the form field will get a red border, but it also loses its width, and that might be confusing to the user.
So, I added the ErrorMessage class:
[Form validation, line 105th to 106th]
function Writeerror (obj,message) {
Obj.classname + = ' errormessage ';
This code gets the existing classname and appends a new class to it, preceded by a space. This space separates the new class and any class values that the object might already have. Now the input box has a red border, in addition to the 75px width, as we would like. The form field now applies two class,html as if:
<input class= "Smaller errormessage" name= "name"/>
Class name and whitespace in Mozilla
You may have noticed that removeerror () removed the value of class errormessage without a front space. That's because of a bug in the browser. When you add errormessage to a class that doesn't have a value, Mozilla deletes the front space. If we subsequently execute replace (/errormessage/, ""), Mozilla cannot remove class, it cannot find the string errormessage, because the front space is gone.
Remove class
Once the user corrects her error, class value errormessage should be removed, but any original class, such as smaller, should not be affected. The Removeerror () function provides this functionality:
[Form validation, line 119th to 120th]
function Removeerror () {
This.classname = This.className.replace (/errormessage/, ");
It first gets the class of the element and then replaces the string ' errormessage ' as ' (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 it still retains the width of 75px.
