0

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

1

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";

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.