Javascript.className does not replace the previous style

Question

When I add .className to change the style of something with or without an event, it does not replace previous styles, such as color, it will add new style properties, but it will not replace the old with new ones.

var loadbutton = document.getElementById('initialbutton');
var loadtext = document.getElementById('altertext');

var mainfunc = function(){
    loadtext.className = "changedtext";
}

loadbutton.addEventListener("click",mainfunc,false)



#altertext {
    color:#F00;
    font-weight:bold;
}

.changedtext {
    color:#0F0;
    font-style:italic;
    font-size:24px;
}

first ID is the original style, and the class is the class I want to apply. Therefore, onclick will apply the changed "font style" and change the "font size", but the color will remain red. I want him to replace red with a new color

Answer 1

. CSS. , id, , , , class. class, id:

.altertext {
    color:#F00;
    font-weight:bold;
}

#altertext .changedtext {
    color:#0F0;
    font-style:italic;
    font-size:24px;
}

, - 0110 (#altertext.changedtext), 0100 (#altertext).

Answer 2

className , CSS .

, #altertext. , , .

, , .

Answer 3

mainfunc , , , @Krasimir - .

var mainfunc = function(){
    loadtext.className = "changedtext";
    loadtext.style.color = "#0F0"; 
}

Fiddle: http://jsfiddle.net/qzLa3/1/