HTMLElement.classList (.toggle) 사용 방법은 무엇입니까?

Question

나는 CSS3 전환 (woohoo)을 몇 번 테스트하기 위해 웹 페이지 (woohoo)를 만들었습니다. 영상 효과는 잘 작동합니다 (최후의 우우). 그러나 새로운 HTMLElement.classList는 다른 요소에 이상한 것을합니다.

웹 페이지 : http://hotblocks.nl/tests/css/transitions.html

가 무엇을 : body 요소에 클래스 b을 전환 .

는 것을 어떻게하는지 : 작동 document.body.classList.toggle('b');

과 : 믿을 수 없을 정도로 간단합니다! 그러나! 시체의 첫 번째 아이가 어떻게 든 변경됩니다. 첫 번째 자식의 클래스는 전환하기 전에 slow이었고 object으로 변경되었습니다 (토글 ???).

왜 그런가요? 토글 기능을 올바르게 사용하지 않습니까? 토글 기능이 예상했던 것과 다른 기능을합니까? reaklly docs/spec을 읽지는 않았지만, (.classList)는 간단하게 만들어졌습니다.

Answer 1

이 문제는 toggle 함수에는 없지만 단추 태그에 대한 이벤트 처리기를 초기화하는 페이지 끝의 스크립트 태그에는 문제가 있습니다. 버튼에 클릭이 object에있는 버튼의 부모 요소에서 첫 번째 DIV 플러스 버튼의 클래스 이름의 클래스를 설정하도록

스크립트는 문서에 모든 button 태그에 이벤트 핸들러를 추가합니다.

이 이벤트 핸들러는 앞뒤 버튼에 추가하려했으나 bgcolor 버튼에도 추가되었으므로 버튼을 클릭하면 slow div의 클래스 이름이 변경됩니다.