Question

这不起作用，没有任何反应。我如何让它发挥作用，我做错了什么？

function animate() {
  var div = document.getElementById('demo');
  div.style.left = "200px";
  div.style.color = "red";
}

#demo {
  position: absolute;
}

<p id='demo' onclick="animate()">lolol</p>

Answer 1

问题是，因为你使用event handler content attribute，你的全局函数......

window.animate

......被...遮蔽了。

Element.prototype.animate

...最近在Web Animations中介绍了：

<强> 5.21 Extensions to the Element interface

由于DOM Elements可能是动画的目标，Element 接口[ DOM4 ]扩展如下：
Element implements Animatable;
这允许以下用法。
elem.animate({ color: 'red' }, 2000);

此问题在step 10的getting the current value of the event handler中解释：

词汇环境范围



如果 H 是元素的event handler，那么让 Scope 成为NewObjectEnvironment（ document ， 全球环境）。

否则， H 是Window对象的event handler：让 范围是全球环境。



如果表单所有者不为null，请将作用域作为NewObjectEnvironment的结果（表单所有者，作用域的）。



如果元素不为null，请将范围作为NewObjectEnvironment（元素，范围）的结果。


注意： NewObjectEnvironment（）在ECMAScript第5版第10.2.2.3 NewObjectEnvironment (O, E)部分中定义

这意味着目标元素的范围会影响全局范围。

因此，你可以

重命名您的功能

function animate__() { var div = document.getElementById('demo'); div.style.left = "200px"; div.style.color = "red"; }

#demo { position: absolute; }

Click me

使用window.animate（假设window未被遮蔽）：

Click me

function animate() { var div = document.getElementById('demo'); div.style.left = "200px"; div.style.color = "red"; }

#demo { position: absolute; }

Click me

使用event handler IDL attribute代替content attribute one：

document.getElementById('demo').onclick = animate;

function animate() { var div = document.getElementById('demo'); div.style.left = "200px"; div.style.color = "red"; } document.getElementById('demo').onclick = animate;

#demo { position: absolute; }

Click me

使用event listener代替event handler：

document.getElementById('demo').addEventListener('click', animate);

function animate() { var div = document.getElementById('demo'); div.style.left = "200px"; div.style.color = "red"; } document.getElementById('demo').addEventListener('click', animate);

#demo { position: absolute; }

Click me

Answer 2

正如评论中所述，修复方法是重命名该功能，因为Chrome似乎保留了原始名称。

element.animate（）

即将推出的Web Animations JavaScript API可让您通过脚本为Web内容添加动画效果。今天Beta中包含的element.animate（）函数是Chrome中的第一部分API：它可以使用JavaScript创建简单的CSS动画。这意味着可以动态生成动画而无需支付CSS样式重新计算成本。以这种方式创建的动画也是可取消的，并提供有保证的结束事件（相比之下，CSS Transitions仅在它们导致样式更改时才生成事件）。

http://blog.chromium.org/2014/05/chrome-36-beta-elementanimate-html.html

这是原始animate函数的用法示例：

elem.animate([
    {transform: 'translateX(0px)'},
    {transform: 'translateX(100px)'}
], 3000);

Answer 3

我刚遇到同样的问题。现在我知道＆＃39; animate＆＃39;是一个保留的词或什么的。我改变了我的功能名称来自＆＃39; animate＆＃39;到了＃anm＆＃39;该计划工作正常。多么恶作剧！

名为`animate`的JS函数在Chrome中不起作用，但在IE中有效

3 个答案: