여러 줄의 js 코드를 수행하려는 HTML 페이지가 있습니다. 나는이 필요하다고 전부라고 생각모든 것을 위해 하나의 외부 js 파일을 추가 하시겠습니까?
<script src="jsPage.js"></script>
이
이document.getElementById("title").style.color = "blue";
이 내 HTML 페이지의 머리에서 jsPage.js에 : 지금 내가 한 일을 시도하고있다. 그러나 내 제목은 빨간색으로 유지됩니다 (이것은 html 페이지에 첨부 된 CSS 문서에서 설정 한 것입니다). js 파일에서 표준 선언이나 무언가가 빠졌습니까?
document.getElementById("title").style.color = "blue";이 jsCalc.js 인 것으로 가정하면 윈도우가로드 된 후 텍스트 색상이 변경되지 않을 가능성이 높습니다. 그들이로드 한 전에 DOM 요소를 변경할 수
jsCalc.js의 내용은
window.onload = function() {
document.getElementById("title").style.color = "blue";
};
해야한다.
아, 나는 그것이 어떻게 작동 하는지를 이해하지 못했다. 궁극적으로 내 js는 사용자의 작업에 응답하는 기능 만 갖습니다. 그럼이 부분은 여전히 헤드 섹션에서 올바르게 작동해야합니까? –
이것은 여전히 헤드 섹션에서 작동합니다. 예 – Vince
js 파일을 문서의 헤드에로드하고 있기 때문에 문서가로드되고 title 요소가 있기 전에 javascript가 실행 중일 가능성이 큽니다.
처리 방법에는 몇 가지가 있지만 가장 간단한 방법은 파일의 head 대신 파일의 맨 아래로 이동하여 스크립트가 참조하는 문서 요소 다음에로드되도록하는 것입니다.
Vince's answer은 문제의 요소가로드 된 후에 javascript가 실행되도록하는 또 다른 방법입니다.
<script> 태그가 머리에 있기 때문에 본문이 렌더링되기 전에 실행되기 때문에 "title"요소가 없습니다.
더 좋은 방법이 있지만 태그를 </body> 직전에 넣는 것이 좋습니다.
Vince가 언급 한 바 : window.onload를 사용하면 윈도우가로드 될 때까지 코드 실행이 대기하므로 DOM이 있는지 확인할 수 있습니다.
하지만 추가로 항상 몸에 자바 스크립트를로드하는 것이 좋습니다. 그렇지 않으면 파일을 가져올 때까지 페이지 로딩이 중단됩니다.
js가 다른 서버에서로드되고 시간이 걸리는 경우 DOM도 렌더링되지 않습니다.
그리고 "지연"속성을 사용하여 머리 속에 스크립트를 보관할 수 있습니다. 이것은 같은 목적으로 사용될 것입니다. "Defer"는 모든 것이 완료된 후에로드되도록합니다. 같은
뭔가 : 당신이 그것을 가져올 때
<script type="text/javascript" scr="page.js" defer></script>
이 스크립트가 호출됩니다. 따라서 id를 "title"로하여 요소를 생성하기 전에 이것을 가져오고 있다면 그것을 찾지 않고 아무런 효과가 없습니다. – kingdamian42