DOMContentLoaded 전에 DOM API를 사용하여 만드는 내 페이지에 내비게이션 요소가 있습니다. 펼치거나 접을 수 있습니다. DOM을 준비하기 전에 클래스를 만들고 관련 클래스를 모두 첨부하기 때문에 마침내 부모 노드에 연결하면 해당 클래스가 이미 있습니다.DOM 준비가되기 전에 클래스를 첨부하십시오.
제 질문은 이것이 body 요소 (DOMContentLoad 이벤트 전에 스타일을 첨부하십시오)와 관련이 있는지 질문하는 것입니다.
내가 원하는 이유는 클래스가 body 요소에 추가 될 때 CSS3 전환으로 인한 시각적 결함이 있기 때문입니다. 가능한 경우 미리 클래스를 갖고 싶습니다.
당신은 DOMContentLoaded 이벤트 전에 <body> 요소에 클래스를 첨부 할 수있는 경우와 스크립트가 <body> 태그의 시작 뒤에 위치하는 경우에만. 여기서 중요한 것은 스크립트의 위치입니다.
그래서,이 작동합니다 :
<body>
<script>
document.body.className += " foo";
</script>
other HTML here
</body>
스크립트 순서와 스크립트가 실행될 때 <script> 태그가 DOM에 장소에있을 것입니다 전에있는 DOM 요소에서 실행됩니다. DOMContentLoaded 이벤트는 DOM 전체가 구문 분석을 완료했음을 의미합니다. 이미 파싱 된 내용에 액세스 할 수 없다는 의미는 아닙니다.
섹션 <head> 섹션에서 항상 사용할 수있는 document.documentElement을 수정하여 <html> 태그에 클래스를 추가 할 수도 있습니다. 방아쇠를 당길 부모 CSS 선택 도구 일 경우 보통은 <body> 태그에 클래스를 추가하는 것뿐입니다.
참고로, 플리커 또는 미완성 객체 임시 표시를 방지하기 위해 공통의 주위에 작업 페이지가 해당 객체가 아직 보이지 않는 렌더링을 시작으로 귀하의 CSS에 보이지으로 지정된 오브젝트를하는 것입니다.
그런 다음 스크립트는 해당 개체의 개체, 스타일 또는 클래스를 실행 및 수정 한 다음 스크립트가 수행하는 마지막 작업은 최종 형식 인 경우에만 화면에 그려 지도록 개체를 볼 수있게 만드는 것입니다 스크립트가 수정 한 후에).
이 경우 document.documentElement를 사용할 수 있습니다. 고마워요! – tau
코드를 보지 않고서는 ... –
에 달려 있습니다.
에서 실행되는 코드에는 수정할 수 이 없습니다. 코드가 본문에서 실행되면 document.body.classList/className을 실행하지 마십시오. 당신은 CSS를 거꾸로 뒤집어 클래스 위에 숨어있을 수도 있습니다. – dandavisCSS 활성화의 경우 과
이 작동하며 모든 document.documentElement는 항상 사용할 수 있습니다. – dandavis