>웹 프론트엔드 >CSS 튜토리얼 >내 'animate' 기능이 IE에서는 작동하지만 Chrome에서는 작동하지 않는 이유: JavaScript 섀도잉 문제?

내 'animate' 기능이 IE에서는 작동하지만 Chrome에서는 작동하지 않는 이유: JavaScript 섀도잉 문제?

DDD
DDD원래의
2024-12-06 01:36:13583검색
<p>Why Does My `animate` Function Work in IE But Not Chrome: A JavaScript Shadowing Issue?

JS 함수 'Animate'가 Chrome에서는 실패하지만 IE에서는 성공: 섀도잉 문제 해결

문제 설명

<p>인라인 함수가 포함된 onClick 이벤트 요소의 스타일을 변경하도록 설계된 'animate'라는 이름은 Chrome에서는 실패하지만 IE에서는 의도한 대로 작동합니다. 'animate' 함수 내에서 호출되는 코드는 JavaScript를 사용하여 요소의 위치와 색상을 수정하는 것을 목표로 합니다.

function animate() {
  var div = document.getElementById('demo');
  div.style.left = "200px";
  div.style.color = "red";
}
#demo {
  position: absolute;
}
<p>

해결 방법 및 설명

<p>문제는 JavaScript의 범위에 있습니다. 체인 및 섀도잉 메커니즘. 인라인 이벤트 핸들러 속성(예: onclick)을 활용하면 최근 도입된 Web Animations API에서 파생된 'Element.prototype.animate' 메서드에 의해 전역 함수 'animate'가 모호해집니다.

window.animate // global function

Element.prototype.animate // element's own method
<p>DOM 사양에 따르면 전역 이벤트 핸들러 환경은 이벤트 처리 중에 요소의 범위를 숨깁니다. 따라서 요소의 'animate' 방법은 전역 'animate' 기능보다 우선합니다.

10. Let the current event handler value be the result of the following steps:
    ...
    4. Let the target environment be the lexical environment scope.
    ...
    6. If the element is non-null, then
        a. Let the target environment be the result of NewObjectEnvironment(the element, the target environment).
<p>이를 수정하려면 다음과 같은 여러 접근 방식을 사용할 수 있습니다.

  1. 전역 함수:
function animate__() {
  var div = document.getElementById('demo');
  div.style.left = "200px";
  div.style.color = "red";
}
  1. 전역 함수를 대상에 바인딩 요소:
document.getElementById('demo').addEventListener('click', animate.bind(document.getElementById('demo')));

위 내용은 내 'animate' 기능이 IE에서는 작동하지만 Chrome에서는 작동하지 않는 이유: JavaScript 섀도잉 문제?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.