Получить значение масштаба элемента?

Question

Мне интересно, как я могу получить значение масштаба элемента?

я пытался $(element).css('-webkit-transform'); который возвращается matrix(scaleX,0,0,scaleY,0,0); Есть ли способ получить scaleX а также scaleY только?

Answer 1

Если это было определено матрицей, я думаю, что вы не можете простым способом, но вы можете легко проанализировать значение:

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 тоже верно?

Answer 2

Самым простым решением для определения масштабного коэффициента между документом и элементом является следующее:

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

Это работает, потому что getBoundingClientRect возвращает фактическое измерение, а offsetWidth/Height - это немасштабированный размер.

Answer 3

Если вам нужно настроить таргетинг только на 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

Вы можете посмотреть демо здесь: http://jsfiddle.net/umZHA/

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(", "").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 ")"

Answer 5

Более надежный и общий способ получить шкалу:

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

Он сравнивает визуальные размеры с немасштабированными размерами. Так что он будет работать даже с вложенными масштабируемыми элементами.

Answer 6

Слишком поздно для 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, но может быть легко расширено для большего количества браузеров, изменяющих первую строку.

Answer 7

Использование регулярного выражения

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