Question

我正在尝试将它看起来像一个简单的练习，一个旋转轮。但事实证明，这比我期待的更令人沮丧。所以我用谷歌搜索了如何创建一个，我的代码与我发现的代码非常相似，但是我的代码没有用，JSFiddle示例似乎也有用。

接下来我做的就是删除我拥有的所有内容并复制并粘贴JSFiddle。但猜猜怎么了？它没有用。这是JSFiddle http://jsfiddle.net/YNBxz/2/

我添加了一个警报，看它是否会进入该功能，它甚至没有进入该功能。代码似乎没问题，在JSFiddle中它也有效。

 var img = document.querySelector('img');
 img.addEventListener('click', onClick, false);

 function onClick() {
     alert('ALERT ME');
     this.removeAttribute('style');
     var deg = 500 + Math.round(Math.random() * 500);
     var css = 'transform: rotate(' + deg + 'deg);';
     this.setAttribute('style', css);
 }

很抱歉，如果某些部分不清楚，我会不时地过于复杂化。

Answer 1

这是一个fixed fiddle。你不能不应该从DOM节点中删除“style”元素。但是，您可以为其添加属性：

this.style.webkitTransform = "rotate(" + deg + "deg)";
this.style.mozTransform = "rotate(" + deg + "deg)";
this.style.transform = "rotate(" + deg + "deg)";

Answer 2

你的小提琴适合我...在webkit浏览器中。您正在使用WebKit前缀，因此您需要使用能够正确解释这些WebKit属性的浏览器对其进行测试。使用Chrome，它对我来说没有任何改变。删除前缀时，它也适用于例如Firefox浏览器。

删除前缀肯定是正确的步骤。所有主流浏览器for a while now都支持CSS转换。通过使用带前缀的名称，您只需锁定其他名称。 所以只需删除前缀。

在您的代码中，请注意您不需要this.removeAttribute('style');行，因为它实际上没有任何内容。当你想要替换样式时，只需简单地替换它就足够了。对DOM的更改（如更改元素的属性值）将在提交之前收集，因此首先删除该属性，然后再次设置它将捆绑在一次操作中更改它（两者之间没有暂停）。所以你也可以离开removeAttribute行。

＆＃34;变换：旋转（＆＃39;＆＃39;）＆＃34;不工作。使用Javascript

2 个答案: