Question

我有一个div，背景色。使用Javascript我可以在div周围使用3个包装器来改变色调，饱和度和亮度过滤器，每个包装器都带有一个过滤器。

   <div class="filterHue">
      <div class="filterSaturation">
         <div class="filterLightness">
            <div class="baseColor"></div>
         </div>
      </div>
   </div>

如何在滤镜后获得baseColor div的结果背景颜色，以便将该颜色应用于多个文本元素？

我提出的唯一解决方案是以与div相同的方式包装文本元素，但我认为在页面上有太多过滤器是一种过度杀伤，如果有可能，我更喜欢另一种解决方案。

Answer 1

我认为你不能从div获得计算出的颜色。但是你可以使用javascript来计算滤镜对基色的影响。看看这个图书馆 - https://github.com/bgrins/TinyColor

它包含lighten，saturate和spin

等方法

Answer 2

我不这么认为。我认为window.getComputedStyle()可能有所帮助。但我不认为它需要考虑已解决的背景颜色。

以下代码仍然输出：

rgb（0,0,255）

＆＃13;

var e = document.querySelectorAll("div.test")[0];

alert(window.getComputedStyle(e, null)["background-color"]);

＆＃13;

.test {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: blue;
  filter: grayscale(100%);
}

＆＃13;

<div class="test"></div>

＆＃13;

CSS过滤后获取背景颜色

2 个答案: