Получить значение CSS трансформации непосредственно с помощью jquery

Question

Я получаю -moz-transform: translate(-283.589px, 0px) от DOM, выполняя element.style[vendor + 'Transform'].Теперь я хочу извлечь значение -283.589px, чтобы использовать его в моем приложении, но не могу получить точный способ его получения.Если я делаю console.log($('.slide').css("-moz-transform")), он возвращает значение матрицы как matrix(1, 0, 0, 1, -283.589px, 0px).Есть ли подходящий способ в jquery напрямую получить значение -283.589px.Я не хочу делать какие-либо матричные вычисления.

Answer 1

У меня есть хорошие и плохие новости.

Начну с плохих новостей: после изучения объекта, возвращаемого jQuery, объект matrix - это не что иное, как строка, и абсолютно нетТаким образом, вы можете получить другой объект, кроме строки.Как бы нам не хотелось соглашаться с тем, что это не должна быть строка: значения CSS являются строками, поэтому jQuery возвращает строки.

Итак, нравится вам это или нет, вам действительно нужно разобрать строку по порядку.чтобы получить значение.Хорошая новость: у меня есть два решения.

Теперь, если вы ОЧЕНЬ уверены, что первая пара значений ВСЕГДА одинакова, вы можете просто использовать подстроку.Но следующая проблема: в Google Chrome значение -283.589px меняется на -283.5889892578125.

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

var matrix = $('.selector').css('-moz-transform');
var values = matrix.match(/-?[\d\.]+/g);

Это получает все значения вашей строки.

Выбрав правильный индекс, вы можете получить свое значение:

var x = values[5];

Это лучшее решение, которое я могу предложить, и я уверен, что это единственно возможное решение.

Answer 2

Поскольку мне постоянно нужно использовать jQuery вместе с TweenMax, а TweenMax уже позаботился обо всем разборе различных типов строк преобразования, а также о проблемах совместимости, я написал здесь небольшой плагин jquery здесь (подробнее об окончании gsap), который может напрямую получить доступ к этим значениям, как это:

$('#ele').transform('rotationX') // returns 0
$('#ele').transform('x')         // returns value of translate-x

Список свойств, которые вы можете получить / установить, вместе с их начальными свойствами:

perspective: 0
rotation: 0
rotationX: 0
rotationY: 0
scaleX: 1
scaleY: 1
scaleZ: 1
skewX: 0
skewY: 0
x: 0
y: 0
z: 0
zOrigin: 0

Answer 3

Хотя jQuery не может сделать это один, метод Regex был бы лучше.
В приведенном ниже коде функции parseComplexStyleProperty принимают строку, которая является, например, атрибутом style элемента, и разбивают ее наОбъект ключей и значений:

function parseComplexStyleProperty( str ){
   var regex = /(\w+)\((.+?)\)/g,
       transform = {},
       match;

   while( match = regex.exec(str) )
       transform[match[1]] = match[2];
  
   return transform;
}

//////////////////////////////////////////

var dummyString = $('something').attr('style'),
    transformObj = parseComplexStyleProperty(dummyString);


console.log(dummyString, transformObj)

Answer 4

с использованием var matrix = $('.selector').css('-moz-transform');,

matrix.match(/([-+]?(?:\d*\.)?\d+)\D*, ([-+]?(?:\d*\.)?\d+)\D*\)/);

даст вам объект с {0, 1, 2, index, input}

[1] = x, [2] =у