Control transform: scaleX & transform: scaleY independently with javascript on the same object using-CodePudding

The following code allows them to be controlled individually, my issue is if you adjust one, then adjust the other, the value for the first you adjusted is lost (removed) instead of added (appended?) to the inline css.

function scaleXfont(e) {
  var scaleamount = document.getElementById("scaleXslider").value;
  document.getElementById("transscale").style.transform = "scaleX("   scaleamount   ")";
  currentcss();
}

function scaleYfont(e) {
  var scaleamount = document.getElementById("scaleYslider").value;
  document.getElementById("transscale").style.transform = "scaleY("   scaleamount   ")";
  currentcss();
}

function currentcss() {
document.getElementById("currentcss").innerText = document.getElementById("transscale").style.cssText;
}

<div class="singlecontrol">
<span style="vertical-align: middle;">ScaleX</span>
<input style="vertical-align: middle;" id="scaleXslider" oninput="scaleXfont(event)" type="range" value="0.0" min="-10" max="10" step="0.01" autocomplete="off" />
</div>

<div class="singlecontrol"
><span style="vertical-align: middle;">ScaleY</span>
<input style="vertical-align: middle;" id="scaleYslider" oninput="scaleYfont(event)" type="range" value="0.0" min="-10" max="10" step="0.01" autocomplete="off" /></div>

<div id="cssinuse">
Current CSS = <br />
<span id="currentcss"></span>
</div>
<br /><br />
<div style="display:inline-block; width:100%; text-align:center;">
<div id="transscale">Stretch/Flip Me</div>
</div>

CodePudding user response：

transform will need to have both scales set in it all the time.

To avoid having to get the current values each time and then do string comparisons/replacements this snippet gets the JS to set a couple of CSS variables --x and --y with the style in the element being of this form:

style="transform: scaleX(var(--x)) scaleY(var(--y));"

function scaleXfont(e) {
  var scaleamount = document.getElementById("scaleXslider").value;
  document.getElementById("transscale").style.setProperty('--x', scaleamount);
  currentcss();
}

function scaleYfont(e) {
  var scaleamount = document.getElementById("scaleYslider").value;
  document.getElementById("transscale").style.setProperty('--y', scaleamount);
  currentcss();
}

function currentcss() {
  document.getElementById("currentcss").innerText = document.getElementById("transscale").style.cssText;
}

<div class="singlecontrol">
  <span style="vertical-align: middle;">ScaleX</span>
  <input style="vertical-align: middle;" id="scaleXslider" oninput="scaleXfont(event)" type="range" value="0.0" min="-10" max="10" step="0.01" autocomplete="off" />
</div>

<div class="singlecontrol"><span style="vertical-align: middle;">ScaleY</span>
  <input style="vertical-align: middle;" id="scaleYslider" oninput="scaleYfont(event)" type="range" value="0.0" min="-10" max="10" step="0.01" autocomplete="off" /></div>

<div id="cssinuse">
  Current CSS = <br />
  <span id="currentcss"></span>
</div>
<br /><br />
<div style="display:inline-block; width:100%; text-align:center;">
  <div id="transscale" style="transform: scaleX(var(--x)) scaleY(var(--y)); --x: 1; --y: 1;">Stretch/Flip Me</div>
</div>

CodePudding user response：

Now solved by grabbing both slider values and applying them at the same time using

var scaleXamount = document.getElementById("scaleXslider").value;

var scaleYamount = document.getElementById("scaleYslider").value;

style.transform = "scale(" scaleXamount ", " scaleYamount ")";

It was the comment

transform will need to have both scales set in it all the time.

that made me think this way so thank you.

Working code..

function scalefont(e) {
  var scaleXamount = document.getElementById("scaleXslider").value;
  var scaleYamount = document.getElementById("scaleYslider").value;
  document.getElementById("transscale").style.transform = "scale("   scaleXamount   ", "   scaleYamount   ")";
  currentcss();
}

function currentcss() {
document.getElementById("currentcss").innerText = document.getElementById("transscale").style.cssText;
}

<div class="singlecontrol">
<span style="vertical-align: middle;">ScaleX</span>
<input style="vertical-align: middle;" id="scaleXslider" oninput="scalefont(event)" type="range" value="1.0" min="-10" max="10" step="0.001" autocomplete="off" />
</div>

<div class="singlecontrol"
><span style="vertical-align: middle;">ScaleY</span>
<input style="vertical-align: middle;" id="scaleYslider" oninput="scalefont(event)" type="range" value="1.0" min="-10" max="10" step="0.001" autocomplete="off" /></div>

<div id="cssinuse">
Current CSS = <br />
<span id="currentcss"></span>
</div>
<br /><br />
<div style="display:inline-block; width:100%; text-align:center;">
<div id="transscale">Stretch/Flip Me</div>
</div>