javascript - 更改汉堡菜单的颜色，使其与下方的背景颜色不同

Question

我正在构建一个单页网站，该网站将有一个用于打开菜单的固定汉堡图标。汉堡图标的颜色与某些页面的某些背景颜色相同。因此，当汉堡图标出现在这些页面上时，它将不可见。我正在寻找一种方法来改变页面上具有相同颜色的汉堡图标的颜色。

假设汉堡图标通常是蓝色的，它下面的 div 是白色的，这里汉堡图标仍然是蓝色的。但是，如果当汉堡图标到达此 div 时下一个 div 为蓝色，它会将其颜色更改为白色。

我的汉堡图标是一个带有下面 css 的空 div，使它看起来像一个汉堡图标。汉堡图标包裹在另一个位置固定的 div 中。

//HTML Code
<section class="buttonset">
    <div id="nav_list"></div>
</section>

//CSS Code
.buttonset
{
    height: 50px;
    position: fixed;
    top: 53px;
    left: 55px;
    z-index: 1;
}

#nav_list 
{
  cursor: pointer;
  height: 30px;
  width: 41px;
}

#nav_list:before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 0.17em;
    background: #71ADBE;
    box-shadow: 0 6px 0 0 #71ADBE, 0 12px 0 0 #71ADBE;
    border-radius: 2px;
}

我想要的是当它下面的 div 的背景颜色与汉堡图标的背景颜色相同时，将汉堡图标的背景颜色更改为不同的颜色。

即 if(burger icon = blue & homePage = blue){ 汉堡图标背景颜色变为白色；

为了实现这一点，我认为代码必须不断运行以检查页面的背景颜色，以便能够更改汉堡图标的颜色。

有什么办法可以做到吗？也许使用 javascript 或 jquery 检测页面的背景颜色，然后更改汉堡图标的颜色？

谢谢

Answer 1

编辑 基于更新 HTML 和 CSS，我创建了另一个 fiddle https://jsfiddle.net/snpsp6as/4/

这是检查主体颜色是否与汉堡颜色匹配，如果匹配则将汉堡按钮更改为白色。

  var element = document.getElementsByTagName("BODY")[0];
  var style = window.getComputedStyle(element, "");
  var bgColor = style.getPropertyValue("background-color");
  var color = window.getComputedStyle(document.querySelector('#nav_list'), ':before').getPropertyValue('background-color');

  if (bgColor == color) {
    document.styleSheets[0].addRule('#nav_list:before', 'background: white !important; box-shadow: 0 6px 0 0 white, 0 12px 0 0 white !important;'); 
  }

是的，参见 fiddle https://jsfiddle.net/snpsp6as/

这是在寻找背景颜色blue，如果是blue，它会将文本更改为white

<div id="div1">
  <h1 id="myH1">Blue</h1>
</div>

<script>
  var element = document.getElementById("div1");
  var style = window.getComputedStyle(element, "");
  var bgColor = style.getPropertyValue("background-color");
  alert("The background color is: " + bgColor);
  if (bgColor === "rgb(0, 0, 255)") {
    document.getElementById("myH1").style.color = "white";
  }

</script>