CSS/JavaScript：根据其当前背景更改元素类？答案

【问题标题】：CSS/JavaScript: Change element class depending on its' current background?CSS/JavaScript：根据其当前背景更改元素类？
【发布时间】：2017-09-04 16:05:59
【问题描述】：

对于一个固定的、透明的菜单按钮（在position:fixed; 菜单中）我想实现以下目标：

如果按钮悬停在大部分深色背景上，请将其设为白色。

如果按钮悬停在大部分明亮的背景上，请将其设为黑色。

听起来很简单，但似乎真的很复杂。

我找到了以下库：http://www.kennethcachia.com/background-check/

问题：

仅适用于图片，几乎不适用于背景图片
不适用于非图像背景

我已经阅读了很多关于 CSS 混合模式 (https://css-tricks.com/basics-css-blend-modes/) 的内容，但我真的不知道它们如何帮助我实现这种简单的行为。

我还读到canvas 元素可能会有所帮助，但我不知道为什么。

这是我的虚拟代码：

$(document).scroll(function() {
     check_bg_for_el();
});

function check_bg_for_el() {
    if(hasDarkBackground($('#myel'))) {
       $(this).addClass('dark-bg');
    }  else {
       $(this).addClass('light-bg');
    }
}

function hasDarkBackground(el) {
    // ????
}

您对如何实现这一点有任何想法吗？

【问题讨论】：

你试过Window.getComputedStyle吗？
@OlegYudovich 这对我有什么帮助？
您是否要确定图像是暗还是亮？或者如何使暗图像变亮，反之亦然？
@Blindman67 我想知道：透明 div 后面的颜色是什么？
这不是一件容易的事，因为您不能直接从 DOM 元素中采样颜色。您可以使用 document.elementsFromPoint 获取光标下方的元素，然后使用 getComputedStyle 解析图像或颜色。如果是图像或渐变，则必须通过将 DOM 元素重建到画布中来使用画布对区域进行采样/平均，然后获取颜色（很像 html2canvas 的工作）。您可能希望将其转换为结合阈值的亮度值。最简单的方法是通过 CSS 使用混合混合模式“差异”，但这不会给出黑白。这个问题需要一个广泛的答案。

标签： javascript jquery html css canvas

【解决方案1】：

我为你创建了一个可重用的函数。您可以更改任何 CSS 属性（使用其 JS 对应项作为参数传递）。示例 CSS background-color => backgroundColor。

颜色必须以rgb 格式传递，由window.getComputedStyle() 返回。

let changeDomCond = (source, target, condProp, condPropValue, newPropValue) => {
  let sourceDom = document.getElementById(source);
  let targetDom = document.getElementById(target);
  let style = window.getComputedStyle(sourceDom);
  if (style[condProp] === condPropValue) {
    targetDom.style[condProp] = newPropValue;
  }
};

  let btn = document.getElementById('btn');
  btn.addEventListener('click', e=> {
    changeDomCond('bkg1', 'a', 'backgroundColor', 'rgb(255, 0, 0)', 'rgb(100, 100, 200)');

changeDomCond('bkg2', 'b', 'backgroundColor', 'rgb(255, 255, 0)', 'rgb(255, 150, 255)');
  });

#bkg1 {
  width: 250px;
  height: 100px;
  background-color: rgb(255, 0, 0);
}

#bkg2 {
  width: 250px;
  height: 100px;
  background-color: rgb(255, 255, 0);
}

#a,
#b {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: orange;
}

<button id="btn">Click here to change color conditionally</button>
<div id="bkg1">
  <div id="a">
    Hello 1
  </div>
</div>

<div id="bkg2">
  <div id="b">
    Hello 2
  </div>
</div>

【讨论】：