使用JS设置-webkit-transform和transform [英] Set -webkit-transform and transform using JS

问题描述

我正在尝试使用jQuery更改元素的transformcss属性：

I am trying to change "transform" css property of element, using jQuery:

myBlock.css('-webkit-transform', 'rotate(' + angle + 'deg)');
myBlock.css('-moz-transform', 'rotate(' + angle + 'deg)');
myBlock.css('-ms-transform', 'rotate(' + angle + 'deg)');
myBlock.css('-o-transform', 'rotate(' + angle + 'deg)');
myBlock.css('transform', 'rotate(' + angle + 'deg)');

我想看到所有这些属性都应用于元素，但结果只是

I want to see all of these properties applied to element, but the result is only

transform: rotate(45ged);

我尝试过JavaScript风格，但也没有帮助：

I tried JavaScript style, but it does not help too:

myBlock.style.WebkitTransform = "rotate(" + angle + "deg)";

应用的样式与前面的示例相同。
我发现信息，现代jQuery版本（从1.8）自动删除前缀。但为什么JS风格会删除供应商属性？
要在一个attr（'style'，'properties'）中写下所有这些，字符串不是解决方案，因为在这种情况下它会删除现有样式。
所以问题是：如何使用JS或jQuery应用所有转换属性？
感谢您的帮助。

Applied style is the same, as in previous example. I found information, that modern jQuery versions (from 1.8) remove prefixes automatically. But why JS-style removes vendor properties? To write all of these in one "attr('style', 'properties')" string is not a solution, because in this case it removes existing styles. So the question is: how to apply all transform properties, using JS or jQuery? Thanks for any help.

编辑：目标是在执行JS命令后在保存的html中加上前缀属性，而不仅仅是执行JS命令并旋转div角度的值。

the goal is to have prefixed properties in saved html after executing JS command, not just to execute JS command and rotate div on angle's value.

推荐答案

所以，我没有找到任何好的解决方案，除了修改样式字符串。这是：

So, I have not found any good solution, except to modify "style" string. Here is it:

myBlock.css('transform', 'rotate(' + angle + 'deg)');
// Fix for old android versions:
var blockStyle = myBlock.attr('style');
if (blockStyle.indexOf('-webkit-transform') === -1) {
    blockStyle += " -webkit-transform: rotate(" + angle + "deg);";
}
myBlock.attr('style', blockStyle);

第一行代码覆盖所有转换属性，包括前缀。执行后， style 字符串中没有 -webkit-transform 部分。然后我们添加它。

The first line of code overwrites all transform properties, including prefixed. After its execution there will be no -webkit-transform part in style string. Then we add it.

如果 -webkit-transform > style 字符串以某种方式在第一个命令之后（对我而言，现代Chrome，Firefox和Edge中从未发生过），我有 else 语句，有点有点难看，但它确实有效。

In case of there still will be -webkit-transform in style string somehow after the first command (for me it never happen in modern Chrome, Firefox and Edge), I have else statement, a little bit ugly, but it works.

var blockStyle = myBlock.attr('style');
if (blockStyle.indexOf('-webkit-transform') === -1) {
    blockStyle += " -webkit-transform: rotate(" + angle + "deg);";
} else {
    var blockStyleArrayOriginal = blockStyle.split('-webkit-transform: rotate(');
    blockStyle = blockStyleArrayOriginal[0].trim() + " -webkit-transform: rotate(" + angle + blockStyleArrayOriginal[1].substring(blockStyleArrayOriginal[1].indexOf('deg)'));
}
myBlock.attr('style', blockStyle);

这篇关于使用JS设置-webkit-transform和transform的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！