如何使用Javascript精确设置动态样式转换？ [英] How to exact set a dynamic style transform using Javascript?

问题描述

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

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

  //元素的变量，而不是参数。分离出来使得更清楚。 
 var el = document.getElementById（'el'）; 
 function setTransform（p_name，p_value）{
 //如何编写一些代码来设置el转换风格... 
} 
  pre> 
 
 
此外，我有一个元素：
 < div id =elstyle =transform：rotate（45deg）skew（45deg）;>< / div> 
  
我们的函数setTransform：
  setTransform（'rotate'，'30deg'）; 
  
我希望元素是：
 < div id =elstyle =transform：rotate（30deg）skew（45deg）;>< / div> 
  
所以我的问题是如何写函数setTransform的内容？
解决方案
注意：您应该使用skewX和/或skewY而不是skew。请参阅此处的MDN信息 
 
 
 
在变量中跟踪变换会更容易：
  var elRot，//元素'el'的旋转'counter'
 elScale，//元素'el'的缩放'counter'
 elSkewX，// skewX 'counter'为元素'el'
 elSkewY; //元素'el'的skewY'counter'
 
 //初始化值
 elRot = 0; 
 elScale = 1; 
 elSkewX = 0; 
 elSkewY = 0; 
  
或对象：
  var elTranform = {
 rot：0，//元素'el'的旋转'counter'
 sca：1，//元素的scale'counter' 'el'
 skx：0，//元素'el'的skewX'counter'
 sky：0 //元素'el'的skewY'counter'
} 
  
现在你可以从函数开始第一步是获取值，所以你改变给函数的参数：
  //使用单独的vars 
 function setTransform（element，rotationArg，scaleArg，skewXArg，skewYArg）{
 //如何编写一些代码来设置el转换风格... 
} 
 
 / / use this with the object 
 function setTransform（element，elTransformArg）{
 //如何编写一些代码来设置el转换风格... 
} 
  
接下来你重新指定任何其他的'保持'变换，在你给出的例子中，skewX保持45deg： p> 
 
 
  function setTransform（element，rotationArg，scaleArg，skewXArg，skewYArg）{
 //括号会导致字符串之前被分配
 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 +deg）scale（+ scaleArg 
 +）skewX（+ skewXArg +deg）skewY（+ skewYArg + 
} 
  
或
  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 
 
 //现在将该变量附加到每个前缀样式
 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））; 
 
 //现在将该变量附加到每个前缀样式
 element.style.webkitTransform = transfromString; 
 element.style.MozTransform = transfromString; 
 element.style.msTransform = transfromString; 
 element.style.OTransform = transfromString; 
 element.style.transform = transfromString; 
} 
  
现在调用函数：
 
 $ b b 
  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）; 
  
这样你只需要改变每个转换的'counter'值，应用变换。如上所述，保持任何未改变的变换是重要的，因为这只是用新的变换替换先前的CSS值。赋予多个值意味着只使用最后一个值（CSS的C部分）。
 
I know method of setting transform, but I want to set the rotate and to keep others such as scale and skew.

Perhaps, we can write a function as:
// 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...
}
Moreover, I have a element:
<div id="el" style="transform: rotate(45deg) skew(45deg);"></div>
And to us our function setTransform:
setTransform('rotate', '30deg');
I hope the element is this:
<div id="el" style="transform: rotate(30deg) skew(45deg);"></div>
So my question is how to write content of the function setTransform?
解决方案
Note: you should use skewX and/or skewY instead of skew. See the MDN info here.

It would be easier to keep track of the transforms in a variable:
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;
or an object:
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'
};
So now you can start with the function (you will still use var el for the element), the first step is getting the values, so you change the arguments given to the function:
// 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...
}
Next you have re-specify any other transforms that are 'staying', in the example you give, the skewX remains 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()");
}
or
function setTransform (element, elTransformArg) {
    element.style.transform = ("rotate() scale() skewX() skewY()");
}
Now you have to put the arguments into the string:
function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
    element.style.transform = ("rotate(" + rotationArg + "deg ) scale(" + scaleArg
        + ") skewX(" + skewXArg + "deg ) skewY(" + skewYArg + "deg )");
}
or
function setTransform (element, elTransformArg) {
    element.style.transform = ("rotate(" + elTransformArg.rot + "deg ) scale("
        + elTransformArg.sca + ") skewX(" + elTransformArg.skx + "deg ) skewY("
        + elTransformArg.sky + "deg )");
}
A bit messy, so put that string in a variable (this will be beneficial for the prefixes):
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;
}
or
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;
}
Now call the function:
setTransform(el, elRot, elScale, elSkewX, elSkewY);
or
setTransform(el, elTransform);
To change values, change the variables or object values and call:
elRot = 45;
elSkewX = 30;
setTransform(el, elRot, elScale, elSkewX, elSkewY);
or
elTransform.rot = 45;
elTransform.skx = 30;
setTransform(el, elTransform);
This way you only have to change the 'counter' values for each transform, and call the function to apply the transform. As mentioned above, it is important to keep any transforms that are not changed as this simply replaces the previous CSS value for the transform with the new one. Giving multiple values means only the last one is used (the C part of CSS).

                        
这篇关于如何使用Javascript精确设置动态样式转换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！