Why can't I set an attribute to an element through JS ?

[adityathebe]

function init() {
var drink = document.getElementById("coffee");
drink.innerHTML = "I love tea.";
drink.setAttribute("color", "red");
}

window.onload = init; 

I love coffee.

This is my code.
I have selected the element with the id "coffee" and assigned it to the variable "drink".
I changed its content with the "innerHTML" property.
And, now, I want to set a "color" attribute to the element .
What's wrong with my code ? Why is the color not changing ??

[bethrobson]

Because "color" is not an attribute of an HTML element. "color" is a CSS property. You need to make a CSS class, like this:

.red {
    color: red;
}

and then set the class attribute of your HTML element to the class red:

drink.setAttribute("class", "red");

Hope that helps.

[adityathebe]

Thanks ! That first line was what I needed.