使用Javascript調整窗口大小時如何更改菜單文本

Question

我想在將窗口大小調整為768px或更低時自動更改菜單文本。

有什么解決辦法嗎？

下面的代碼不起作用。

function menu() {
  let w = window.outerWidth;
  let y = document.getElementById("home");

  if (w <= 768) {
    y.innerText = "Menu";
  } else {
    y.innerText = "Home";
  }
}

menu();

Answer 1

上面的代碼有效，您可能只需要在resize 事件觸發時調用它。 例如，如果上面的代碼在一個名為“菜單”的函數中：

function menu(){
    let w = window.outerWidth;
    let y = document.getElementById("home");

    if (w <= 768) {
        y.innerText = "Menu";
    } else {
        y.innerText = "Home";
    }
}

window.onresize = menu;

盡管如此，使用 CSS媒體查詢來做到這一點更有意義。