Javascript 获取元素的比例值？

我想知道如何获得元素的比例值

---

我尝试了

$（element.css（'-webkit-transform'）

返回

矩阵（scaleX，0,0，scaleY，0,0）

是否有一种方法可以只获取

scaleX

和

scaleY

呢？

如果它是由矩阵指定的，我想你不能用一种简单的方法，但是你可以很容易地解析值：

var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/,
    matches = $(element).css('-webkit-transform').match(matrixRegex);

匹配项[1]

将包含scaleX，而

匹配项[2]

将包含scaleY。如果可能还应用了其他转换，则需要稍微调整正则表达式，因为现在它假定所有其他参数都为0

获取比例值的一种方法可能是删除任何变换，测量元素的计算宽度/高度，然后将其添加回去并再次测量。然后划分新值/旧值。我还没试过，但可能有用。jQuery本身对许多度量使用类似的方法，它甚至有一个未记录的

$.swap（）

函数

---

PS：您也在使用

-o-transform

-moz-transform和

-ms-transform

，对吗？

如果您只需要针对webkit（因为它是针对iPhone或iPad的），最可靠和快速的方法是使用本机javascript webkit提供：

node = $("#yourid")[0];
var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
alert(curTransform.a); // curTransform is an object,
alert(curTransform.d); // a through f represent all values of the transformation matrix

您可以在此处查看演示：

---

对于OP来说太晚了，但将来可能会有用。使用拆分有一种简单的方法：

function getTransformValue(element,property){       
        var values = element[0].style.webkitTransform.split(")");
        for (var key in values){
            var val = values[key];              
            var prop = val.split("(");          
            if (prop[0].trim() == property)
                return prop[1];
        }                   
        return false;           
    }

---

这是特定于webkit的，但是可以很容易地扩展到更多修改第一行的浏览器。

找出文档和元素之间比例因子的最简单解决方案如下：

var element = document.querySelector('...');
var scaleX = element.getBoundingClientRect().width / element.offsetWidth;

---

这是因为getBoundingClientRect返回实际尺寸，而offsetWidth/Height是未缩放的尺寸。

您可以使用以下方法：

var element = document.getElementById("elementID");
// returns matrix(1,0,0,1,0,0)
var matrix = window.getComputedStyle(element).transform;
var matrixArray = matrix.replace("matrix(", "").matrix.split(",");
var scaleX = parseFloat(matrixArray[0]); // convert from string to number
var scaleY = parseFloat(matrixArray[3]);
// bonus round - gets translate values
var translateX = parseFloat(matrixArray[4]); 
var translateY = parseFloat(matrixArray[5]); // parseFloat ignores ")"

---

回答得很好。它在Chrome上运行良好，MDN网站建议它在IE9+上运行——这是一个很好的答案。我不知道getBoundingClientRect会得到实际的缩放大小。在iOS Webview

元素中。getBoundingClientRect（）。width

不会返回缩放宽度，只是返回正常宽度。我用了

window.screen.width

来代替.1，让我意识到这个游戏不值得花那么多精力。在我发疯之前，我必须做一些简单的事情^_^如果其他参数不是0，我们可以使用

matrixRegex=/matrix\（\s*（\d*？\d*）、\s*（\d*？\d*）、\s*（\d*？\d*）、\s*（\d*？\d*）、\s*（\d*。\d*）、\s*（\d*。\d*）/

我相信第3行中有一个额外的“矩阵”。应为var matrixArray=matrix.replace（“矩阵（“，”）.split（“，”）；