Comment déterminer la couleur de fond d’un élément sous-jacent visible?

J’ai une page avec une position fixe ‘haut de la page’ qui rest en bas de la page lorsque l’utilisateur fait défiler l’écran. C’est dans le pied de page DIV de la page comme ceci:

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

Utilisation de jQuery ou JS, j’aimerais pouvoir modifier la couleur de fonction de la couleur de fond sous-jacente. Jusqu’ici, j’ai regardé ici:

Comment détecter la couleur de fond héritée d’un élément avec jQuery / JS?

Ce code ne semble pas fonctionner pour mon cas d’utilisation. Peut-être puisque le en question n’est pas vraiment “à l’intérieur” du rest de la page DOM lorsqu’il défile?

Donc: y a-t-il un moyen de détecter la couleur d’arrière-plan sous-jacente «exacte» (c’est-à-dire la couleur d’arrière-plan que l’utilisateur verrait réellement dans la fenêtre d’affichage)?

Vous recherchez window.getComputedStyle .

Il retourne le style calculé de l’élément que vous lui donnez.

EDIT: La propriété de couleur d’arrière-plan devenait transparente, j’ai donc écrit une fonction de recherche de couleur d’arrière-plan récursive qui contourne ce problème.

 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; } 
 
^