有时导航栏的颜色在 Chrome 中不会改变答案

【问题标题】：Sometimes the color of the navbar doesn't change in Chrome有时导航栏的颜色在 Chrome 中不会改变
【发布时间】：2021-12-07 20:45:52
【问题描述】：

我正在开发我的web developer portfolio。当我按下汉堡包时，顶部导航栏的颜色也应该改变。但有时在 Chrome 中它不会改变，我必须重新加载。我认为这可能是因为脚本没有加载。但是即使等待了很长时间，也会出现此错误。谁能说出它为什么会发生以及如何解决它。 请注意，此颜色更改仅适用于移动导航。源代码可在https://github.com/mrjithin/my-portfolio/ 获得。执行此操作的脚本可以在脚本文件夹中使用名称 ham.js 获得。顶部颜色应该与导航栏其余部分的颜色相同。

// ham.js
// For mobile hamburger
const mobNav = document.querySelector("nav#mobile");
const deskNav = document.querySelector("nav.desktop");
const navColor = window.getComputedStyle(mobNav).getPropertyValue("background-color");

document.getElementsByClassName("ham")[0].addEventListener("click", (event) => {
  document.getElementsByClassName("ham")[0].classList.toggle("cross");
  document.getElementById("line2").classList.toggle("none");
  mobNav.classList.toggle("on");
  mobNav.classList.toggle("off");
  if(mobNav.className === "on"){
    deskNav.style.backgroundColor = navColor;
  } else {
    deskNav.style.backgroundColor = "";
  }
  event.stopPropagation();
});

// To close the navbar on clicking a link. 
const mobileLis = document.querySelectorAll("nav#mobile a");

Array.from(mobileLis).forEach(link => {
  link.addEventListener("click", event => {
    document.getElementsByClassName("ham")[0].classList.toggle("cross");
  document.getElementById("line2").classList.toggle("none");
    mobNav.classList.toggle("on");
    mobNav.classList.toggle("off");
    if(mobNav.className === "on"){
      deskNav.style.backgroundColor = navColor;
    } else {
      deskNav.style.backgroundColor = "";
    }
    event.stopPropagation();
  })
})

提前致谢！

【问题讨论】：

标签： javascript css google-chrome uinavigationbar

【解决方案1】：

代替这段代码

const navColor = window.getComputedStyle(mobNav).getPropertyValue("background-color");

试试这个

const navColor = () => window.getComputedStyle(mobNav).getPropertyValue("background-color");

并调用navColor作为函数navColor()

【讨论】：

谢谢@Oleg Barabanov，你能说出为什么它以前不起作用吗？
第一次运行const navColor = window.getComputedStyle(mobnav).GetPropertyValue("background-color")会计算一次背景。但是当分辨率改变时，背景颜色会改变，但是navColor常量并没有更新，旧的值就保存在那里。