单击时将父 div 的颜色更改为活动子元素的颜色

Question

与上面写的差不多，我想更改容器 div 的颜色，以便它反映特定选定活动元素的颜色。

例如，容器的背景是灰色阴影 - 当我单击元素时，该元素包含蓝色背景。我希望蓝色背景填充灰色元素。依此类推，选择不同的元素和颜色。我只包含了一个元素，但至少还有 4 个元素需要此编码。

我想这需要用 JavaScript 来完成？我见过悬停解决方案，它们需要 JS。

#tabTopBar {
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #dddddd;
}

.tabTop {
    overflow: hidden;
    border: 1px solid black;
    background-color: gray;
}

.tabTop a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

#armory.active {
    background-color: #0e343d;
    color: white;
    pointer-events: none;
}

#armory:hover {
    background-color: #879a9e;
    color: black;
}

#peerless.active {
    background-color: #bab757;
    color: white;
    pointer-events: none;
}

#peerless:hover {
    background-color: #dcdbab;
    color: black;
}

   <div id="tabTopBar">
        <div class="tabTop">
            <a id="armory" href="#armory" class="active">Armory</a>
            <a id="peerless" href="#peerless">Peerless</a>
        </div>
    </div>

Answer 1

在 Javascript 中，使用

getComputedStyle

（请参阅 MDN）获取元素的背景颜色，然后将栏设置为该颜色。下面的例子。

注意：我必须从 CSS 中删除

pointer-events:none

才能允许事件触发。

window.onload = () => {
  document.querySelector('#tabTopBar').addEventListener('click', (event) => {
    const elementBackgroundColor = getComputedStyle(event.target).backgroundColor;
    document.querySelector('.tabTop').style.backgroundColor = elementBackgroundColor;
  });
}

#tabTopBar {
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #dddddd;
}

.tabTop {
  overflow: hidden;
  border: 1px solid black;
  background-color: gray;
}

.tabTop a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#armory.active {
  background-color: #0e343d;
  color: white;
}

#armory:hover {
  background-color: #879a9e;
  color: black;
}

#peerless.active {
  background-color: #bab757;
  color: white;
}

#peerless:hover {
  background-color: #dcdbab;
  color: black;
}

<div id="tabTopBar">
  <div class="tabTop">
    <a id="armory" href="#armory" class="active">Armory</a>
    <a id="peerless" href="#peerless">Peerless</a>
  </div>
</div>