更改 CSS“transform”中的“scale”属性答案

【问题标题】：Change "scale" attribute in CSS "transform"更改 CSS“transform”中的“scale”属性
【发布时间】：2016-08-28 01:31:34
【问题描述】：

我有以下div

<div style="transform-origin: left top 0px; transform: translate3d(0px, -26px, 0px) scale(1);">

如您所见，transform 包含scale(1)。更改scale 值的最佳方法是什么？

感谢您的帮助。

【问题讨论】：

标签： javascript css regex scale css-transforms

【解决方案1】：

您可以使用正则表达式（假设您的 div DOM 元素位于变量“el”中并希望将比例更改为 2）：

el.style.transform.replace(/scale\(\d+\)/, 'scale(2)');

【讨论】：

不幸的是，与that answer 不同的是，它存在多个问题：它不会转义字符串括号并假设比例乘数是整数而不是浮点数。
感谢您对括号的评论，@lwc，我更改了它以防止读者复制和粘贴错误的代码。但是，OP并没有要求一定的乘数，而只是为了更换比例。
不过，我看不出有什么优势。

【解决方案2】：

当然，使用 javascript。有很多方法可以做到这一点，我会使用正则表达式。

function changeScale(newScale){
    var div = document.getElementById('theID');
    var curTrans = div.style.transform;
    var newScaleString = 'scale(' + newScale + ')';
    var regex = /scale\([0-9|\.]*\)/;
    var newTrans = curTrans.replace(regex, newScaleString);
    div.style.transform = newTrans;
}

或者用更少的行：

function changeScale(newScale){
    var div = document.getElementById('theID');
    div.style.transform = div.style.transform.replace(/scale\([0-9|\.]*\)/, 'scale(' + newScale + ')');
}

【讨论】：

@AndiPavllo 太棒了:)
我已经对其进行了编辑，不再手动重复术语“scale(”和“)”，并将其转换为可运行的代码。