Изменить перевод CSS3, сохранив другие значения?

Question

У меня есть элемент, к которому применено -moz-transform с translateX(), translateY() и skew(). Что мне нужно сделать, это изменить значение skew(), не касаясь переводов, используя JavaScript.

Как бы мне этого добиться?

Answer 1

Вот общее решение:

var elem = /*...*/

var transformations = getComponentsFromAttribute(elem.style['-moz-transform']);
transformations.skew = [1, 1];

elem.style['-moz-transform'] = getAttributeFromComponents(transformations));

Использование этих функций:

function getComponentsFromAttribute(attribute)
{
    var componentMap = {};

    var regex = /([a-z]*)\(([^)]*)\)/gi;
    var matches;

    while(matches = regex.exec(attribute))
        componentMap[matches[1]] = matches[2].split(/, */);

    return componentMap;
}

function getAttributeFromComponents(componentMap)
{
    var componentList = [];

    for(var key in componentMap)
        componentList.push(key + '(' + componentMap[key].join(',') + ')');

    return componentList.join(' ');
}