Javascript代碼添加不應該在那裏的東西

Question

我正在創建一個網站，我想要設置一個菜單，只顯示某種方式時顯示在某些px寬度。我稍後將更改代碼以執行if語句來檢查它是否是觸摸屏。但是，現在我必須通過寬度來測試代碼。然而，即使當我改變到更高的寬度後，它正確加載了一定的寬度，我仍然添加了我的標籤和輸入。 My codepen

我的javascript代碼。

var mediaTab = window.matchMedia("(max-width: 1024px)"); 
 

 
    function addmenu() { 
 
    if (mediaTab) { 
 
     var menu = document.querySelector("#top-lvl-menu"); 
 
     var navBar = document.querySelector("nav"); 
 
     var navToggle = document.createElement("label"); 
 
     var navInput = document.createElement("input"); 
 

 
     navToggle.innerHTML = "☰ Menu"; 
 
     navToggle.className = "menu"; 
 
     navInput.id = "menu-Toggle"; 
 
     navInput.type = "checkbox"; 
 
     navToggle.appendChild(navInput); 
 

 
     navBar.insertBefore(navToggle, menu); 
 
     navToggle.appendChild(menu); 
 
    } 
 
    } 
 
    window.addEventListener("load", addmenu, false);

<nav> 
 
    <ul id="top-lvl-menu"> 
 
    <li><a href="#">Link</a> 
 
    </li> 
 
    <li><a href="#">Link</a> 
 
     <ul id="services-submenu"> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Link</a> 
 
    </li> 
 
    <li><a href="#">Link</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

從MDN window.matchMedia：

返回表示指定媒體查詢字符串的解析結果的新MediaQueryList對象。

因此，無論窗口大小是否滿足媒體查詢，它都會返回一個對象。

幸運的是，對象是返回包含'匹配'屬性。

嘗試：

... 
if(mediaTab.matches){...} 

編輯：另外，該方法僅支持早在IE10。您可能需要考慮使用window.innerWidth，然後在if語句中進行比較。

var mediaTab = window.innerWidth; 
if(mediaTab < 1024){...}