名为“ animate”的JS函数在Chrome中不起作用，但在IE中起作用

一尘不染

名为“ animate”的JS函数在Chrome中不起作用，但在IE中起作用

html

这行不通，什么也没发生。我如何使其工作，我在做什么错？

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>

阅读 373

2020-05-10

共1个答案

一尘不染

问题在于，由于您使用事件处理程序的content属性，因此您的全局函数…

window.animate

被…遮盖

Element.prototype.animate

…这是最近在Web Animations中引入的：

5.21Element接口扩展

由于DOM元素可能是动画的目标，因此Element 接口[
DOM4 ]扩展如下：

 Element implements Animatable;

这允许以下类型的用法。

 elem.animate({ color: 'red' }, 2000);

在获取事件处理程序的当前值的[步骤10]中说明了此行为：

词汇环境范围

如果 H
是元素的事件处理程序，则让 Scope 为NewObjectEnvironment（ document ， 全局环境 ）的结果。

否则， H 是Window对象的事件处理程序：让 Scope 为 全局环境 。

如果 表单所有者 不为null，则使 Scope 为NewObjectEnvironment（ form owner ，
Scope ）的结果。
如果 element 不为null，则让 Scope 为NewObjectEnvironment（ element，Scope
）的结果。

注意： _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
```
使用事件处理程序IDL属性代替内容属性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
```
使用事件侦听器代替事件处理程序：
```
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
```

2020-05-10