我知道设置变换的方法，但我想设置旋转并保留其他设置，例如缩放和倾斜。

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

// 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函数的内容怎么写？

最佳答案

注意:您应该使用 skewX 和/或 skewY 而不是 skew。参见 the MDN info here .

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

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 保持 45 度:

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 transformString = ("rotate(" + rotationArg + "deg ) scale(" + scaleArg
        + ") skewX(" + skewXArg + "deg ) skewY(" + skewYArg + "deg )");
    
    // now attach that variable to each prefixed style
    element.style.webkitTransform = transformString;
    element.style.MozTransform = transformString;
    element.style.msTransform = transformString;
    element.style.OTransform = transformString;
    element.style.transform = transformString;
}

或

function setTransform (element, elTransformArg) {
    var transformString= ("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 = transformString;
    element.style.MozTransform = transformString;
    element.style.msTransform = transformString;
    element.style.OTransform = transformString;
    element.style.transform = transformString;
}

现在调用函数:

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 部分)。

关于javascript - 如何使用 Javascript 精确设置动态样式转换？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19675997/