我正在尝试使用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。
答案 0 :(得分:0)
也许您可以首先检索样式属性,追加自己的属性,然后再次在元素上设置它。
var value = element.getAttribute('style');
value += 'your new style attributes';
element.setAttribute('style', value);
答案 1 :(得分:0)
所以,我没有找到任何好的解决方案,除了修改“样式”字符串。这是它:
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);