使用JS滑块独立控制同一对象transform的scaleX与scaleY变换

问题原因 #

transform是整体生效的CSS属性，你目前的写法每次赋值都会直接覆盖掉之前全部的transform配置，所以调整第二个滑块时，第一个滑块设置的参数就会被覆盖丢失。

解决方案 #

新增一个统一更新transform的公共函数，每次滑块触发变动时，同时读取两个滑块的当前值，将scaleX和scaleY同时拼接进transform属性即可。

修改后的JS代码： #

// 公共更新函数，同时读取两个滑块值设置transform
function updateTransform() {
  const scaleXVal = document.getElementById("scaleXslider").value;
  const scaleYVal = document.getElementById("scaleYslider").value;
  document.getElementById("transscale").style.transform = `scaleX(${scaleXVal}) scaleY(${scaleYVal})`;
  currentcss();
}

// 两个滑块的触发函数直接调用公共更新逻辑即可
function scaleXfont(e) {
  updateTransform();
}

function scaleYfont(e) {
  updateTransform();
}

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

优化建议 #

你也可以直接修改HTML里滑块的oninput属性，直接绑定updateTransform，省去两个冗余的中间函数：

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

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

内容的提问来源于stack exchange，提问作者Glen Keybit