如何使用JavaScript或jQuery获取HTML元素的比例值？

Question

我想知道如何获取元素的缩放值？

我尝试了`$(element).css('-webkit-transform');`，它返回了`matrix(scaleX,0,0,scaleY,0,0);`。有没有办法只获取`scaleX`和`scaleY`的值？

- einstein

Answer 1

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

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

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

- Joel

---

很棒的答案。它在Chrome上运行良好，而MDN网站表明它将在IE9+上工作-https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect - Charlie

很棒的答案。我不知道getBoundingClientRect会获取实际缩放大小。 - lislis

在iOS Webview中，element.getBoundingClientRect().width不会返回缩放后的宽度，而只是普通宽度。我改用了window.screen.width。 - Sergey Snegirev

如果您旋转该元素，这是否有效？ - AndyS

@AndyS 不，那种情况下是行不通的。 - Simon Arnold

Answer 2

如果它是由一个矩阵指定的，我猜你无法使用简单直接的方法，但你可以轻松地解析该值：

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

matches[1]将包含scaleX，matches[2]将包含scaleY。如果可能已应用其他转换，则需要略微调整正则表达式，因为现在它假定所有其他参数都为0。 获取比例值的一种方法可能是删除任何变换，测量元素的计算宽度/高度，然后再添加它们并重新测量。然后将新旧值相除。我还没有尝试过，但可能有效。jQuery本身对许多测量使用类似的方法，它甚至有一个未记录文档的$.swap()函数专门用于此目的。 PS：你也使用了-o-transform、-moz-transform和-ms-transform，对吗？

- Lea Verou

---

+1 让我意识到这个游戏不值得一玩。在我发疯之前，我必须做些更简单的事情。^_^ - Robusto

如果其他参数不为0，我们可以使用matrixRegex = /matrix\(\s*(-?\d*\.?\d*),\s*(-?\d*\.?\d*),\s*(-?\d*\.?\d*),\s*(-?\d*\.?\d*),\s*(-?\d*\.?\d*),\s*(-?\d*\.?\d*)\)/。 - Massale

Answer 3

如果你只需要针对 Webkit（比如用于 iPhone 或 iPad）进行操作，最可靠且快速的方法是使用 Webkit 提供的本地 JavaScript：

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

你可以在这里查看演示： http://jsfiddle.net/umZHA/

- methodofaction

Answer 4

你可以使用以下方法：

var element = document.getElementById("elementID");
// returns matrix(1,0,0,1,0,0)
var matrix = window.getComputedStyle(element).transform;
var matrixArray = matrix.replace("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 ")"

- 1.21 gigawatts

---

我相信你在第三行多了一个“matrix”。应该是var matrixArray = matrix.replace("matrix(", "").split(","); - colin moock

Answer 5

虽然对于这位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浏览器的，但很容易修改第一行以支持更多浏览器。

- caiocpricci2

Answer 6

更健壮和通用的获取比例尺的方法是：

const { width, height } = element.getBoundingClientRect()
const scale = { x : element.offsetWidth / width, y : element.offsetHeight / height }

它将可视尺寸与非缩放尺寸进行比较。因此，即使嵌套了缩放元素，它也可以正常工作。

- Ybochatay

---

有趣的是，值得一提的是，为了返回与比例尺使用相同的值，反转除法会很有趣。const scale = { x: element.offsetWidth / width, y: node.offsetHeight / element }。 - Marcelo Barros

Answer 7

使用正则表达式

element.style.transform.match(/scale\(([1-9\.])\)/)[1]

- Daniel Garcia