[SalesForce] How to set apex:param value as a javascript variable

I can't dynamically set it with javascript because the apex:param element isn't rendered in HTML, so I'm not sure what I should do to set apex:param's value. I need the value to be a javascript variable. Right now, I have the value hardcoded to be '123' but I want this to be the value of a javascript variable.

VF:

<apex:form>
  <apex:commandLink styleClass="slds-button slds-button--neutral" action="{!back}">
      <apex:param name="customRoles" id="customRoles" value="123" assignTo="{!custom_roles}"/>
    <svg aria-hidden="true" class="slds-button__icon slds-button__icon--left">
      <use xlink:href="{!URLFOR($Resource.lightning, '/assets/icons/utility-sprite/svg/symbols.svg#back')}"></use>
    </svg>
    Back
  </apex:commandLink>
</apex:form> 

Apex:

public String custom_roles {get;set;}

Best Answer

I added your code in a vf page and tried to get the apex:param variable, but it returned null.

This is how I used to do with typical VF pages,

  1. Create an actionfunction tag in your page and define the same param
  2. Add an onlick event for commandLink, and call a JS method

<apex:form>
 <apex:commandLink styleClass="slds-button slds-button--neutral" onclick="assignParamValue();">
    <svg aria-hidden="true" class="slds-button__icon slds-button__icon--left">
      <use xlink:href="{!URLFOR($Resource.lightning, '/assets/icons/utility-sprite/svg/symbols.svg#back')}"></use>
    </svg>
    Back
  </apex:commandLink>

  <apex:actionFunction name="callme" action="{!back}">
        <apex:param name="customRoles" id="customRoles" value="" assignTo="{!custom_roles}"/>
  </apex:actionFunction>
</apex:form>

and then call action function using JS

<script>
    function assignParamValue(){
        var abc ='123';
        callme(abc);
    }
</script>