Question

我正在尝试使用jQuery更改元素的“transform”css属性：

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)');

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

transform: rotate(45ged);

我尝试过JavaScript样式，但它也没有用：

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

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

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

Answer 1

也许您可以首先检索样式属性，追加自己的属性，然后再次在元素上设置它。

var value = element.getAttribute('style');
value += 'your new style attributes';
element.setAttribute('style', value);

Answer 2

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

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);

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

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

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

2 个答案: