如何使用 Javascript 精确设置动态样式转换
How to exact set a dynamic style transform using Javascript?
我知道设置变换的方法,但我想设置旋转并保持其他,例如缩放和倾斜。
也许,我们可以将函数编写为:
// 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('rotate', '30deg');
我希望元素是这样的:
<div id="el" style="transform: rotate(30deg) skew(45deg);"></div>
所以我的问题是如何编写函数setTransform的内容?
注意:你应该使用 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 保持 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 部分)。
这里绝对最好的答案是一个真正的 API,它允许我们影响计算样式的任何现有值,而无需解析值。这样的东西以某种废弃和非跨浏览器的形式存在,与WebkitCSSMatrix API和W3C"官方"等效的DOMMatrix。我已经看到关于重新格式化和整合这两个 API 的讨论,但他们似乎不同意实现。这是一个使其跨浏览器工作的填充程序:来自github用户arian的CSSMatrix类。
其工作原理是,您可以向其传递计算的转换字符串(例如:"translsate3d(0px, 0px, 100px) scale(1.2) skew(2)"
),它返回一个可以使用旋转、转换、平移、倾斜函数进行操作的对象。每个函数都返回带有新操作值的自身现有实例,您只需将其"toString"值重新应用于元素样式属性即可。
很多单词,但这里有一个例子(Chrome和Safari只是因为WebkitCSSMatrix的使用):
var computedStyle = window.getComputedStyle(document.querySelector('.btn'));
var matrix = new WebKitCSSMatrix(computedStyle.transform);
// Every second, we add +6 degrees of rotation, no need to read the initial value since WebkitCSSMatrix has parsed it for us
window.setInterval(function(){
matrix = matrix.rotate(6);
// matrix = matrix.translate(2, 0, 0);
// matrix = matrix.scale(1.8);
document.querySelector('.btn').style.transform = matrix.toString();
}, 1000);
body{
padding-top: 100px;
text-align: center;
}
.btn{
text-transform: uppercase;
border-radius:200%;
border:1px solid #000;
width: 2em;
height: 2em;
display: inline-block;
text-align: center;
line-height: 2em;
text-decoration: none;
font-family: sans-serif;
color: #000;
// It is already rotated and scaled
transition: transform 1000ms cubic-bezier(.28,.73,.31,1);
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.btn:hover{
background:#000;
color:#fff;
transform: rotate(0deg) scale(1.5);
}
<a class="btn" href="#">|</a>
可能以下内容将帮助您...
el.style.webkitTransform = "";
el.style.MozTransform = "";
el.style.msTransform = "";
el.style.OTransform = "";
el.style.transform = "";
- 对插件初始化后动态加载的元素进行样式设置
- 无法在有角度的谷歌地图中动态传递地图样式
- Javascript+动态菜单+当前链接样式(CSS)+基于PHP的网站
- 使用getElementById设置动态ID的输入字段的样式
- 动态添加的对象赢得't在javascript中拾取样式
- 将动态样式应用于数据表行
- javascript初学者:在javascript中添加动态样式
- Google Maps JavaScript API:动态样式KML图层
- 如何使用 Javascript 精确设置动态样式转换
- 使用Spine在Stylus中创建动态样式表
- 动态样式-使用JavaScript操作CSS
- AngularJS:动态样式表链接标记过早触发请求
- 范围内的动态样式
- 动态样式更改方法失败
- 有效的方式来选择和动态样式长的HTML段落
- 动态样式表语言不工作后发布网站在线
- 如何使用ID选择器创建动态样式表?
- 向dom元素添加带条件的动态样式
- 角度2动态样式表元素
- 返回 Ajax 数据后未应用 CSS/Javascript 动态样式