[SalesForce] How to use styleclass attribute in JavaScript

Can anyone tell me how to change the style class property dynamically in Javascript.
Below is my sample visuaflorce page 

<script>  
    function changeFont(input, textid,btnid) {
        if(input.checked) {
            document.getElementById(btnid).styleClass = "current";
             document.getElementById(textid).style.fontWeight = "bold";
        }
        else {
            document.getElementById(textid).style.fontWeight = "normal";
        }
    }
</script>
<apex:stylesheet value="{!URLFOR($Resource.wizard, '/wizard/custom.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.wizard, '/wizard/bootstrap.min.css')}"/>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="{!URLFOR($Resource.wizard,'/wizard/bootstrap.min.js')}"></script>



<apex:form >
    <apex:outputPanel layout="block">
    <label for="checkbox">Click this box to change text font:</label>
    <input id="checkbox" type="checkbox"
        onclick="changeFont(this,'{!$Component.thePanel}','{!$Component.cmdlink}');"/>
</apex:outputPanel>


<apex:outputPanel id="thePanel" layout="block" >
    <div class="wizard">
    Change my font weight!
    <apex:commandLink value="Save"/>
    <apex:commandLink id="cmdlink" styleClass="none" ><span class="badge">2</span>Second</apex:commandLink>
    </div>
</apex:outputPanel>
</apex:form>

The below image shows after clicking the check box
enter image description here

enter image description here

I wanna loooks like above image
If I hardcoded the styleclass then it works

I dono whats problem in this code

Thanks in advacne
Karthick

Best Answer

Manipulating the DOM directly it is className:

if(input.checked) {
    document.getElementById(btnid).className = "current";
    document.getElementById(textid).style.fontWeight = "bold";
}
else {
    document.getElementById(btnid).className = "none";
    document.getElementById(textid).style.fontWeight = "normal";
}

or better:

document.getElementById(btnid).className = input.checked ? "current" : "none";
document.getElementById(textid).style.fontWeight = input.checked ? "bold" : "normal";
Related Topic