CODEWITHSUNDEEP
javascripthtmlcsscss-filters
Fr0z3n
Fr0z3n

Reputation: 1576

Get background color after CSS filters

I have a div, filled with a background color. With Javascript i dinamically change the hue, saturation and lightness filters using 3 wrappers around the div, each one with a filter.

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

How I can get the resulting background color of the baseColor div after the filters, in order to apply that color to multiple text elements?

The only solution that i came up with, is to wrap the text elements the same way as the div, but i think that is a overkill to have too many filters on the page, i prefer another solution if it is possible.

Upvotes: 3

Views: 1633

Answers (2)

zero298
zero298

Reputation: 26878

I don't think so. I thought that window.getComputedStyle() might help. But I don't think it takes the resolved background color into consideration.

The below code still outputs:

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>

Upvotes: 0

Hugo Silva
Hugo Silva

Reputation: 6948

I don't think you can get the computed color from the div. But you can use javascript to calculate the filters effects on the base color. Check out this library - https://github.com/bgrins/TinyColor

It has methods such as lighten, saturate and spin

Upvotes: 1

Related Questions