获取元素缩放比例方法[B君笔记][博客]

noscript{position: fixed}获取元素缩放比例方法js前端创建时间：2022-03-22 23:37:13

获取方法

getBoundingClientRect/ offsetWidth

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

computedStyle

with jQ

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

-o-transform -moz-transformand -ms-transform

use WebKitCSSMatrix

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

native

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 ")"

来源

get-the-scale-value-of-an-element