offsetWidth가 알려지지 않은 값 (JS)을 반환합니다.

Question

wiewport가 변경 될 때 기본 속성에 대해 하나의 링크 된 CSS 파일과 변경되는 뉴스에 대해 두 번째 CSS가 있습니다. JS 스크립트의 끝에서 요소의 offsetWidth를 전역 값 NavW에 넣었습니다. 그래서 JS는 잘못된 값을 반환하는 것처럼 보입니다. DOM에서만 계산되지는 않지만 새로운 기본 CSS 속성을 기반으로합니다. 그러나 대상 요소가 올바르게 렌더링되었습니다. 조건에 '2'값은 css 파일이 아니고 아이콘 인 Link 요소가 있기 때문입니다.

function switchTheme(newHref) 
    { 
     var newIndex; 

     newIndex = document.getElementsByTagName("link").length; 

     var newTheme = document.createElement("link"); 

      newTheme.setAttribute("rel", "stylesheet"); 
      newTheme.setAttribute("type", "text/css"); 
      newTheme.setAttribute("href", newHref); 

     if (newIndex == 2) 
      { 
       document.getElementsByTagName("head").item(newIndex - 2).appendChild(newTheme); 
      } 

     else if (newIndex > 2) 
      { 
       var themeToReplace = document.getElementsByTagName("link").item(2); 

       document.getElementsByTagName("head").item(0).replaceChild(newTheme, themeToReplace); 
      } 

     NavW = document.getElementById("wrap").offsetWidth; 

    } 

Answer 1

몇 가지 포인트 : 스타일 시트를 교체

• 코드는 매우 불필요하게 복잡한 것 같다.
• 더 나아가 새로운 link 요소 내부에 요소를 추가/대체하는 것처럼 보입니다. 이는 잘못된 HTML을 생성한다는 것을 의미합니다. 이는 전혀 작동하지 않는다는 것을 의미합니다. 예 : <link src="..."><link src="..." /></link>
• link 개의 요소 (2)가 하드 코딩되어 있습니다. 링크 요소 수가 변경 될 때마다 코드를 변경해야 할 때 큰 문제가 발생할 것입니다.

처음으로 함수를 만들면 링크 요소를 만들고 머리 끝에 추가하고 참조를 저장할 수 있습니다. 그런 다음 다음 번에 해당 참조를 사용하고 링크를 삭제하지 않고 간단히 변경하십시오 (src).

문제점 : 위와 같은 스타일 시트로드는 비동기식입니다. 즉, link 요소를 생성 한 후 스크립트는 스타일 시트가로드 될 때까지 기다리지 않고 스크립트를 계속 실행합니다 (offsetWidth을 가져 오는 부분 포함).

당신은 그 핸들러에 offsetWidth에 의존하는 모든 링크에 load 이벤트 핸들러를 연결하고 배치해야합니다

:

newTheme.addEventListener("load", function() { 
    var NavW = document.getElementById("wrap").offsetWidth; 
    // get and USE width here 
}, false);