Obtenir la couleur de fond du document

La plupart des navigateurs Web, par défaut, rendent les pages ayant un fond blanc. Cependant, c'est dans une certaine mesure utilisateur personnalisable, et certains navigateurs sont différents. Donc, je souhaite trouver un moyen, soit par CSS, soit par JavaScript, de découvrir la couleur de fond de la page. La documentation sur le site Web de Mozilla suggère que document.bgColor peut être utilisé et que sa valeur par défaut est blanche. Il suggère également de ne pas l'utiliser, car il est obsolète. Mais les docs semblent être en conflit avec le comportement observé: document.bgColor est une chaîne vide si la page n'a pas de CSS pour la modifier. Les alternatives proposées ne fonctionnent pas non plus: tout ce que j'ai essayé me donne une chaîne vide ou "transparente", ce qui est clairement erroné: je ne vois pas le bureau sous mon navigateur, donc ce n'est pas transparent. (Par ailleurs, IE11 se comporte réellement comme la documentation de Mozilla dit que Firefox fait. Go figure.)

Je veux créer un élément de liste html ( <ul> ) dont la couleur d'arrière-plan correspond à la couleur de fond du document. Est-ce possible? (Je suppose que vous pourriez être tenté de demander: si je veux que cela corresponde au fond, n'est pas «transparent» ce que je veux? Non. Je veux qu'il dissimule un autre élément. Pourquoi? Parce que je fais un des Ces idées de suggestion automatique.)

Edit: 2 personnes ont suggéré judicieusement que j'ajoute un exemple pour que ce soit clair sur ce que je parle. Sur la base des réponses que j'ai reçues, ces 2 personnes ont tout à fait raison. J'ai ajouté un lien à un violon dans les commentaires de l'une des réponses, et maintenant je l'ajoute ici:

Https://jsfiddle.net/ftgu97fj/5/

Vous pouvez utiliser les couleurs du système CSS2 – notez qu'elles sont obsolètes dans CSS3 et la propriété d'apparence est conseillée d'utiliser à la place.

 ul { background-color: Background; /* CSS2 only; or maybe "Window", see @Larkeith comment */ }

EDIT: Jan Turoň a trouvé une méthode pour le faire en utilisant CSS2 System Colors; Veuillez vous reporter à sa réponse. Notez que les couleurs du système sont obsolètes et que cette window est la couleur d'arrière-plan par défaut.

Sur la base de la réponse dans cette publication concernant la couleur de fond du texte en surbrillance, il semble que cela ne soit probablement pas possible; La question pertinente est également un choix spécifique à un navigateur de nature très similaire:

Kaiido:

Je dirais que vous ne pouvez pas.

Les deux getComputedStyle (yourElement, ':: selection'). BackgroundColor et getComputedStyle (yourElement, ':: – moz-selection'). BackgroundColor retournera transparent en tant que valeur par défaut et le navigateur ne remplacera pas les valeurs par défaut de OS. (On peut mentionner que si vous la définissez comme transparente, la valeur par défaut de l'OS sera annulée).

Je ne pense pas que les navigateurs ont accès aux préférences par défaut et, s'ils le font, ils ne permettront probablement pas à un site Web de l'accéder facilement.

Cette question suggère l'utilisation d'un élément en toile pour échantillonner la couleur des pixels, mais cela ne semble malheureusement pas fonctionner; En Chrome, il renverra 0,0,0,0 pour la couleur d'un pixel non paramétré. Il donne une solution potentielle à l'aide de chrome.tabs , mais cela n'est disponible que pour les extensions chromées.

La seule possibilité que je puisse imaginer serait d'utiliser quelque chose comme HTML2Canvas pour "capturer la page" et en extraire un pixel vide, mais rien ne garantit que cette bibliothèque fonctionnera correctement pour un arrière-plan désactivé.

Si l'élément <ul> est un descendant direct de l'élément <body> , vous pouvez utiliser css inherit mot-clé

  ul { background-color: inherit; }

Puisque les commentaires passent trop longtemps sur les messages postaux, voici ce que je vous suggère d'essayer:

 window.getComputedStyle(document.body)['backgroundColor'])

L'utilisation de votre affichage automatique correctement dans les pages où aucune couleur de fond n'a été définie (comme la page vide) devrait être couverte en définissant le blanc comme couleur de fond par défaut pour votre ul . Il devient beaucoup plus problématique si vous souhaitez prendre en compte les images en arrière plan.

Sachez également que html peut également avoir une background-color de background-color , et le body peut être limité en taille pour ne pas couvrir l'ensemble de la fenêtre. Voir ce stylo:

http://codepen.io/connexo/pen/jrAxAZ

Cela illustre également que votre attente de voir votre ordinateur de bureau derrière votre navigateur si le corps était vraiment transparent est fausse.

Cela résoudra certainement le problème! Vérifiez la fonction de la fonction js

 function getBackground(jqueryElement) { // Is current element's background color set? var color = jqueryElement.css("background-color"); if (color !== 'rgba(0, 0, 0, 0)') { // if so then return that color return color; } // if not: are you at the body element? if (jqueryElement.is("body")) { // return known 'false' value return false; } else { // call getBackground with parent item return getBackground(jqueryElement.parent()); } } $(function() { alert(getBackground($("#target"))); document.getElementById("ul").style.backgroundColor = getBackground($("#target")); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul id= "ul" style="background-color: red"> <p id="target">I'd like to know that the background-color here is red</p> </ul>