I want to do this:
e.className = t;
Where t is the name of a style I have defined in a stylesheet.
I want to do this:
e.className = t;
Where t is the name of a style I have defined in a stylesheet.
Yes, that works (with the class name as a string, as jonah mentioned). Also, you can set style attributes directly on an object, using the DOM Level 2 Style interface. e.g.,
button.style.fontFamily = "Verdana, Arial, sans-serif";
where button
is (presumably) a button object. :-)
If e
is a reference to a DOM element and you have a class like this: .t {color:green;}
then you want reference the class name as a string:
e.className = 't';
Not only that works, but it's even a best practice.
You definitively want to separate the data format (xHTML) from the design (CSS) and the behaviour (javascript).
So it's far better to just add and remove classes in JS according to event while the esthetic concerns are delegated to css styles.
E.G : Coloring an error message in red.
CSS
.error
{
color: red;
}
JS
var error=document.getElementById('error');
error.className='error';
N.B :