function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
AbAb 

Change CSS based on value

Hello,

I have a VF text like below 
<apex:outputText value="{!cObj.Type__c}" style="font-weight: bold;color: black;font-size: 160%;"/>

I want to control the CSS based on Type__c value
if(Type__c == XYZ)
    style="font-weight: bold;color: black;font-size: 160%;"
else
    style="color: black;"

Thanks for suggestion !
Best Answer chosen by Ab
Lokesh KumarLokesh Kumar
you have to use conditional styling like

style="{!if(opp.StageName='Closed Lost','color:red;font-weight: bold', 'color:black')}"/>

<apex:outputText value="{!cObj.Type__c}" style="{!if(cObj.Type__c='XYZ','font-weight: bold;color: black;font-size: 160%', 'color:black')}"/>

let me know if this helped you 

Lokesh

All Answers

Balayesu ChilakalapudiBalayesu Chilakalapudi
Try like this, 
<apex:outputText value="{!cObj.Type__c}" id="typeid" style="font-weight: bold;color: black;font-size: 160%;"/>
 <script> 
   var typevalue=document.getElementById('{!$Component.typeid}').value;
    if(typevalue== "XYZ") {
       document.getElementById('{!$Component.typeid}').font-weight="bold";
       document.getElementById('{!$Component.typeid}').color="black";
        document.getElementById('{!$Component.typeid}').font-size="12px";
     }else{
       document.getElementById('{!$Component.typeid}').color="blue";
     }
</script> 
</apex:page>

Let us know if it helps
Lokesh KumarLokesh Kumar
you have to use conditional styling like

style="{!if(opp.StageName='Closed Lost','color:red;font-weight: bold', 'color:black')}"/>

<apex:outputText value="{!cObj.Type__c}" style="{!if(cObj.Type__c='XYZ','font-weight: bold;color: black;font-size: 160%', 'color:black')}"/>

let me know if this helped you 

Lokesh
This was selected as the best answer