일반 JavaScript를 사용하여 다음과 같은 DOM 요소 변경 기능이 있습니다. 여기서는 페이지 로드 이벤트를 사용하여 DOM의 일부 텍스트 문자열이 포함된 범위 요소를 변경합니다.
다음 코드를 사용하면 DOM 요소가 예상대로 변경됩니다. 그러나 변수 desktop 和 mobile의 DOM 요소가 변경될 때까지 깜박임 의 가장 작은 부분을 볼 수 있습니다.
페이지의 DOM 콘텐츠가 완전히 로드되면 DOM 변경 사항이 적용되기 때문에 이런 현상이 발생하는 것 같습니다. 변경 사항이 적용될 때까지 기존 레이블 요소를 숨긴 다음 표시하고 싶습니다.
내가 조작하려는 desktop 和 mobile의 요소 구조는 다음과 같습니다.
다음 개념을 확인하세요.
으아아아기존 요소에 대한 변경 사항이 적용될 때까지 먼저 DOM 요소를 숨긴 다음 표시하는 방법이 있나요?
저는 다음과 같은 인라인 CSS 규칙을 사용할 생각입니다:
설정.style.visbility='hidden'，当文本内容改变时用.style.visbility='visble'디스플레이.
하지만 내 코드에서 이 솔루션을 올바르게 구현하는 방법을 잘 모르겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
깜박이는 데에는 여러 가지 이유가 있지만 취할 수 있는 두 가지 예방 조치가 있습니다.
<script defer>上使用defer，因为这可以让浏览器处理脚本的运行顺序，而不是使用DOMContentLoaded。您还可以避免changes.그러나 이 둘 중 하나에 관계없이 여전히 JS를 실행해야 하며 여전히 지연이 있을 수 있다는 점에 유의하세요. 사용할 수 있다면 페이지를 사전 렌더링하는 데 관심이 있을 수 있습니다. JS 코드에서 경로 이름(
eu或us인 경우)을 찾습니다. 이는 페이지가 사전 렌더링 가능하다는 의미입니다.어쨌든 DOM을 조작하려면 DOM이 로드될 때까지 기다려야 합니다. 짝수의 청취자를 사용하는 것이
DOMContentLoaded좋은 방법입니다. 따라서 세 가지 일이 일어나야 합니다:visibility:hidden或display:none。不同之处在于，使用visibility:hidden속성을 사용할 수 있으며 요소는 여전히 공간을 차지합니다. 따라서 선택은 상황에 따라 달라집니다.첫 번째 예에서는 텍스트가 변경되기 전에 페이지가 어떻게 보이는지 확인할 수 있도록 시간 초과를 추가했습니다. 숨겨진 스팬의 크기를 확인할 수 있도록
<p>(display: inline-block) 스타일도 지정했습니다.