Erhalten Hintergrundfarbe nach CSS-Filter

Question

Ich habe ein div, gefüllt mit einer Hintergrundfarbe. Mit Javascript ändere ich dynamisch die Farbton-, Sättigungs- und Helligkeitsfilter mit 3 Wrappern um das Div, jedes mit einem Filter.

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

Wie kann ich die resultierende Hintergrundfarbe des baseColor div nach den Filter bekommen, um die Farbe auf mehrere Textelemente anwenden?

Die einzige Lösung, die ich gefunden habe, ist das Wrappen der Textelemente auf die gleiche Weise wie das div, aber ich denke, dass ein Overkill zu viele Filter auf der Seite ist, bevorzuge ich eine andere Lösung, wenn es möglich ist .

Answer 1

Ich glaube nicht, dass Sie die berechnete Farbe aus dem div bekommen können. Aber Sie können Javascript verwenden, um die Filtereffekte für die Grundfarbe zu berechnen. Sehen Sie sich diese Bibliothek aus - https://github.com/bgrins/TinyColor

Es hat Methoden wie lighten, saturate und spin

Answer 2

ich nicht so denken. Ich dachte, dass window.getComputedStyle() könnte helfen. Aber ich denke nicht, dass es die aufgelöste Hintergrundfarbe in Betracht zieht.

Der Code unten noch Ausgänge:

rgb (0, 0, 255)

var e = document.querySelectorAll("div.test")[0]; 
 

 
alert(window.getComputedStyle(e, null)["background-color"]);

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

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