如何使用 JavaScript 动态设置 style-webkit-change？

我想使用 JavaScript 动态更改 -webkit-transform: rotate()属性，但常用的 setAttribute不起作用:

img.setAttribute('-webkit-transform', 'rotate(60deg)');

.style也坏了。

如何在 JavaScript 中动态设置这个值？

221814 次浏览
小开

尝试使用

img.style.webkitTransform = "rotate(60deg)"
小开
最佳答案

JavaScript 样式名称是 WebkitTransformOrigin和 WebkitTransform

element.style.webkitTransform = "rotate(-2deg)";

检查 WebKit 给你的 DOM 扩展引用。

小开

下面是大多数常见厂商的 JavaScript 注释:

webkitProperty
MozProperty
msProperty
OProperty
property

I reset inline transform styles like:

element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";

像这样使用 jQuery:

$(element).css({
"webkitTransform":"",
"MozTransform":"",
"msTransform":"",
"OTransform":"",
"transform":""
});

见博客文章 用 JavaScript 编码供应商前缀(2012-03-21)。

小开

如果你想通过 setAttribute来做，你可以像这样改变 style属性:

element.setAttribute('style','transform:rotate(90deg); -webkit-transform: rotate(90deg)') //etc

如果您希望重置所有其他内联样式并只再次设置所需样式属性的值，这将很有帮助，但在大多数情况下，您可能不希望这样。这就是为什么每个人都建议使用这个:

element.style.transform = 'rotate(90deg)';
element.style.webkitTransform = 'rotate(90deg)';

以上等同于

element.style['transform'] = 'rotate(90deg)';
element.style['-webkit-transform'] = 'rotate(90deg)';
小开

要使你的3D 对象动画化，使用代码: 

<script>


$(document).ready(function(){


var x = 100;
var y = 0;
setInterval(function(){
x += 1;
y += 1;
var element = document.getElementById('cube');
element.style.webkitTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for safari and chrome
element.style.MozTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for firefox
},50);
//for other browsers use:   "msTransform",    "OTransform",    "transform"


});


</script>

提交答案