how to set value for translateX with css in typescript

Issue

I am using typescript to set a style of a element dynamically, this is the code looks like:

export function showTranslateButton(e: MouseEvent){
  let translateBtn = document.getElementById("translate-btn");
  if(translateBtn){
    translateBtn.style.width ="40px";  
    translateBtn.style.backgroundColor="red";
    translateBtn.style.height="50px";
    translateBtn.style.transform.translateX=e.pageX;
  }
}

when I set the translateX value, shows error that:

Property 'translateX' does not exist on type 'string'.ts(2339)

what should I do to set the translateX value? I have tried this:

translateBtn.style.transform="translate("+e.pageX+ ","+ e.pageY+")";

it compile success but the style did not add success, the style did not contain the transform block.

Solution

I think you should just add "+'px'" add the end of "e.pageX". Because the value should be a number + the unit (px,rem,precent ...)

Tell me if it helps you or not.

Answered By - vina programming