如何使用Javascript精确设置动态样式转换？

Question

我知道设置变换的方法,但我想设置旋转并保持其他如缩放和倾斜.

也许,我们可以编写一个函数:

// A variable of element, not parameter. separate out it make more clear.
var el = document.getElementById('el');
function setTransform (p_name, p_value) {
  // how to write some code to set the el transform style...
}

而且,我有一个元素:

<div id="el" style="transform: rotate(45deg) skew(45deg);"></div>

对我们来说,我们的函数setTransform:

setTransform('rotate', '30deg');

我希望元素是这样的:

<div id="el" style="transform: rotate(30deg) skew(45deg);"></div>

所以我的问题是如何编写函数setTransform的内容？

Answer 1

注意:您应该使用skewX和/或skewY而不是skew.请在此处查看MDN信息.

跟踪变量中的变换会更容易:

var elRot,    // the rotation 'counter' for the element 'el'
    elScale,  // the scale 'counter' for the element 'el'
    elSkewX,  // the skewX 'counter' for the element 'el'
    elSkewY;  // the skewY 'counter' for the element 'el'

// initialize values
elRot = 0;
elScale = 1;
elSkewX = 0;
elSkewY = 0;

或对象:

var elTranform = {
    rot: 0,   // the rotation 'counter' for the element 'el'
    sca: 1,   // the scale 'counter' for the element 'el'
    skx: 0,   // the skewX 'counter' for the element 'el'
    sky: 0    // the skewY 'counter' for the element 'el'
};

所以现在你可以从函数开始(你仍然会使用var el作为元素),第一步是获取值,所以你改变给函数的参数:

// use this with separate vars
function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
    // how to write some code to set the el transform style...
}

// use this with the object
function setTransform (element, elTransformArg) {
    // how to write some code to set the el transform style...
}

接下来,您重新指定了任何其他"保留"的变换,在您给出的示例中,skewX保持为45deg:

function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
    // the brackets cause the string to be evaluated before being assigned
    element.style.transform = ("rotate() scale() skewX() skewY()");
}

要么

function setTransform (element, elTransformArg) {
    element.style.transform = ("rotate() scale() skewX() skewY()");
}

现在你必须将参数放入字符串中:

function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
    element.style.transform = ("rotate(" + rotationArg + "deg ) scale(" + scaleArg
        + ") skewX(" + skewXArg + "deg ) skewY(" + skewYArg + "deg )");
}

要么

function setTransform (element, elTransformArg) {
    element.style.transform = ("rotate(" + elTransformArg.rot + "deg ) scale("
        + elTransformArg.sca + ") skewX(" + elTransformArg.skx + "deg ) skewY("
        + elTransformArg.sky + "deg )");
}

有点乱,所以把这个字符串放在一个变量中(这将有利于前缀):

function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
    var transfromString = ("rotate(" + rotationArg + "deg ) scale(" + scaleArg
        + ") skewX(" + skewXArg + "deg ) skewY(" + skewYArg + "deg )");

    // now attach that variable to each prefixed style
    element.style.webkitTransform = transfromString;
    element.style.MozTransform = transfromString;
    element.style.msTransform = transfromString;
    element.style.OTransform = transfromString;
    element.style.transform = transfromString;
}

要么

function setTransform (element, elTransformArg) {
    var transfromString = ("rotate(" + elTransformArg.rot + "deg ) scale("
        + elTransformArg.sca + ") skewX(" + elTransformArg.skx + "deg ) skewY("
        + elTransformArg.sky + "deg )");

    // now attach that variable to each prefixed style
    element.style.webkitTransform = transfromString;
    element.style.MozTransform = transfromString;
    element.style.msTransform = transfromString;
    element.style.OTransform = transfromString;
    element.style.transform = transfromString;
}

现在调用函数:

setTransform(el, elRot, elScale, elSkewX, elSkewY);

要么

setTransform(el, elTransform);

要更改值,请更改变量或对象值并调用:

elRot = 45;
elSkewX = 30;
setTransform(el, elRot, elScale, elSkewX, elSkewY);

要么

elTransform.rot = 45;
elTransform.skx = 30;
setTransform(el, elTransform);

这样,您只需更改每个转换的"计数器"值,并调用该函数以应用转换.如上所述,保持任何未更改的转换非常重要,因为这只是用新的转换替换先前的转换CSS值.赋予多个值意味着只使用最后一个值(CSS的C部分).