How do I determine background color of visible underlying element?

Question

I have a page with a fixed position 'go to top' <a> which sticks to the bottom of the page as the user scrolls. It's in the footer DIV of the page like so:

.pagedown div a { position: fixed; margin-left: 8px;  margin-top: 50px; width: 44px; height: 40px; color: #bd1300; background: none;}

<div class="footer"><a id="gototop" title="Go to top!" href="#">^</a></div>

Using jQuery or JS I would like to be able to change the color of the <a> based on the true underlying background color. So far, I've looked here:

How do I detect the inherited background-color of an element using jQuery/JS?

This code doesn't seem to work for my use case. Perhaps since the <a> in question is not really 'inside of' the rest of the page DOM as it scrolls by?

So: is there a way to detect the -true- underlying background color (ie. the background color the user would actually see in the viewport)?

The problem is that there is no "THE background" for things like that. With fixed or absolute positioning, your may be positioned half on one
and half on another with a different background color. — Mr Lister, Feb 24 '16 at 10:54
OK. Then is it possible to determine 'THE background' at a particular x/y position in the current Viewport? IOW: I know that my fixed position is always at the bottom left, so can I determine the 'true' background color at that x/y coordinate on the screen? — jchwebdev, Feb 24 '16 at 21:40
Then the question becomes, "how to find the element from the window position", and the answer is, I'm not sure. I searched, but other than [this answer](http://stackoverflow.com/a/10760683/1016716) which loops over all the elements in the body (which can be time consuming if you have a large document), there doesn't seem to be a way. — Mr Lister, Feb 25 '16 at 08:19
I guess one would need to ask "How do I find which elements are present (and which is at the lowest z-index) at the current x/y position of the viewport?" — jchwebdev, Feb 25 '16 at 18:01

score 3 · Answer 1 · answered Feb 16 '16 at 22:36

3

Support is not great (no IE) but you can use CSS for this.

mix-blend-mode @ MDN

.footer {
  font-size: 72px;
  text-align: center;
  margin-bottom: 10px;
  line-height: 100px
}
a {
  color: white;
  mix-blend-mode: difference;
}
body {
  background: red;
}

<div class="footer"><a class="gototop" title="Go to top!" href="#">^</a>
</div>

.footer {
  font-size: 72px;
  text-align: center;
  margin-bottom: 10px;
  line-height: 100px
}
a {
  color: white;
  mix-blend-mode: difference;
}
body {
  background: blue;
}

<div class="footer"><a class="gototop" title="Go to top!" href="#">^</a>
</div>

answered Feb 16 '16 at 22:36

Paulie_D

107,962
13
142
161

But it gives you no control over the 'mixed' color, right? You're at the mercy of the underlying
. That's not great for me.
– jchwebdev Feb 16 '16 at 22:52
Actually 'luminosity' seems to be useful--makes a nice neutral gray. Not ideal, but if I can't get an answer to my original question, I'll likely use this. – jchwebdev Feb 16 '16 at 23:30

Hatchet · Answer 2 · 2016-02-16T23:24:55.553

1

You're looking for window.getComputedStyle.

It returns the computed style of the element you give it.

EDIT: The background color property was returning transparent, so I wrote a recursive background color search function that circumvents this behavior.

function getBGColor(el) {
    var s = getComputedStyle(el),
        b = s.backgroundColor,
        e = el;
    if ((b === "transparent" || b === "rgba(0, 0, 0, 0)" || b === "rgba(255,255,255,0)") && e.parentNode !== null)
        b = getBGColor(e.parentNode);
    return b;
}

document.getElementById("o").innerHTML = "Background Color: " + getBGColor(document.getElementById('gototop'));

html,
body {
  background-color: lavender;
}
a {
  color: #bd1300;
}

<div>
  <a id="gototop" title="Go to top!" href="#">^</a>
</div>

<div id="o"></div>

edited Feb 16 '16 at 23:24

answered Feb 16 '16 at 21:25

Hatchet

5,320
1
30
42

Doesn't seem to work. It always returns 'transparent'. My guess is that this is because the has no background property itself? – jchwebdev Feb 16 '16 at 22:01
@jchwebdev Right; since the default background color is transparent/none, you'll need to set `background: inherit` on the `a`, or check the background color of one of its parents. – Hatchet Feb 16 '16 at 22:07
Still not working. If I use 'inherit' it returns the backgroundColor for the body tag... which is not necessarily the -visible- background. (Since there may be many other on top of that, of course.) I need to know the background color of the -visible- background color. What am I missing? – jchwebdev Feb 16 '16 at 22:15
Still always returns 'transparent'. Using Firefox on Windows 8. – jchwebdev Feb 16 '16 at 23:07
Windows 8. Returns rgba(255,255,255,0) for Chrome and IE. – jchwebdev Feb 16 '16 at 23:15

How do I determine background color of visible underlying element?

2 Answers2

Linked