为何这段JavaScript代码中的addEventListener无法生效？

我写了下面的代码，但没法正常运行。我知道可能有明显的拼写或逻辑错误，但一直找不到问题。点击任意nav-item元素时，body的背景不会改变。我是JavaScript新手，麻烦帮忙排查问题：

原代码 #

JavaScript #

let body = document.querySelector("body");
let navBack = document.getElementById("navbar");
let introNav = document.querySelector(".nav-item1");
let expNav = document.querySelector(".nav-item2");
let projectsNav = document.querySelector(".nav-item3");
let skillsNav = document.querySelector(".nav-item4");
let contactNav = document.querySelector(".nav-item5");

introNav.addEventListener("click", function() {
  body.style.background = introNav.style.background;
  navBack.style.background = introNav.style.background
})

expNav.addEventListener("click", function() {
  body.style.background = expNav.style.background;
  navBack.style.background = expNav.style.background
})

projectsNav.addEventListener("click", function() {
  body.style.background = projectsNav.style.background;
  navBack.style.background = projectsNav.style.background
})

skillsNav.addEventListener("click", function() {
  body.style.background = skillsNav.style.background;
  navBack.style.background = skillsNav.style.background
})

contactNav.addEventListener("click", function() {
  body.style.background = contactNav.style.background;
  navBack.style.background = contactNav.style.background
})

CSS #

#navbar {
    background: var(--introduction-color);
    z-index: 1;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    position: absolute;
    clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
    transform: rotate(-45deg);
    top: -400px;
    left: -400px;
}
.nav-items {
    width: 800px;
    height: 800px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    z-index: 3;
    cursor: pointer;
    clip-path: polygon(50% 50%, 100% 50%, 100% 66%);
}
.nav-item1 {
    background: var(--introduction-color);
    transform: rotate(45deg);
}
.nav-item2 {
    transform: rotate(63deg);
    background: var(--experience-color);
}
.nav-item3 {
    transform: rotate(81deg);
    background: var(--projects-color);
}
.nav-item4 {
    transform: rotate(99deg);
    background: var(--skills-color);
}
.nav-item5 {
    transform: rotate(117deg);
    background: var(--contacts-color);
}

HTML #

<div id="navbar">
  <div class="nav-items nav-item1"></div>
  <div class="nav-items nav-item2"></div>
  <div class="nav-items nav-item3"></div>
  <div class="nav-items nav-item4"></div>
  <div class="nav-items nav-item5"></div>
</div>

问题原因 #

你用element.style.background获取导航项的背景色，但这个属性只能读取元素的内联样式（即直接写在HTML元素style属性里的样式），而你的导航项背景色是通过CSS类定义的，所以introNav.style.background这类语句返回的是空值，无法设置body的背景。

修复方案 #

使用window.getComputedStyle()获取元素最终生效的样式值，同时简化重复代码：

修复后的JavaScript #

const body = document.querySelector("body");
const navBack = document.getElementById("navbar");
// 一次性选中所有导航项
const navItems = document.querySelectorAll(".nav-items");

// 循环绑定点击事件
navItems.forEach(item => {
  item.addEventListener("click", () => {
    // 获取元素实际应用的背景色
    const bgColor = window.getComputedStyle(item).backgroundColor;
    body.style.backgroundColor = bgColor;
    navBack.style.backgroundColor = bgColor;
  });
});

额外注意事项 #

1. 确保CSS变量已正确定义，比如在全局:root中声明：

:root {
  --introduction-color: #你的颜色值;
  --experience-color: #你的颜色值;
  --projects-color: #你的颜色值;
  --skills-color: #你的颜色值;
  --contacts-color: #你的颜色值;
}

2. 使用backgroundColor替代background，避免获取到背景图、重复方式等无关属性，更精准地设置背景颜色。

内容的提问来源于stack exchange，提问作者Sagar Mavai