Obtener el color de fondo del documento

La mayoría de los navegadores web, de forma predeterminada, muestran páginas con fondo blanco. Sin embargo, esto es en cierta medida personalizable por el usuario, y algunos navegadores son diferentes. Entonces, quiero encontrar una forma, ya sea a través de CSS o JavaScript, para descubrir el color de fondo de la página. La documentación en el sitio web de Mozilla sugiere que se puede usar document.bgColor, y que su valor predeterminado es blanco. También sugiere no usarlo, ya que está en desuso. Pero los documentos parecen estar en conflicto con el comportamiento observado: document.bgColor es una cadena vacía si la página no tiene CSS para cambiarla. Las alternativas sugeridas tampoco funcionan: todo lo que probé me da una cadena vacía o “transparente”, lo cual es claramente incorrecto: no puedo ver el escritorio debajo de mi navegador, por lo tanto, no es transparente. (Por cierto, IE11 en realidad se comporta como la documentación de Mozilla dice que Firefox lo hace. Vaya figura).

Quiero crear un elemento de lista html (

    ) cuyo color de fondo coincida con el color de fondo del documento. es posible? (Supongo que podría estar tentado de preguntar: si quiero que coincida con el fondo, ¿no es “transparente” lo que quiero? No. Quiero que cubra algún otro elemento. ¿Por qué? Porque estoy haciendo uno de esas cosas sugieren automáticamente.)

    Editar: 2 personas sabiamente sugirieron que agregue un ejemplo para que quede claro de qué demonios estoy hablando. En base a las respuestas que he estado recibiendo, estas 2 personas tienen toda la razón. He agregado un enlace a un violín en los comentarios de una de las respuestas, y ahora lo estoy agregando aquí:

    https://jsfiddle.net/ftgu97fj/5/

    Puede usar los colores del sistema CSS2 : tenga en cuenta que están desaprobados en CSS3 y se recomienda utilizar la propiedad de apariencia en su lugar.

    ul { background-color: Background; } ul { background-color: Background; } /* this should be desktop background */

    ul { background-color: Window; } /* this is browser background */

    EDITAR: Jan Turoň ha encontrado un método para hacer esto usando CSS2 System Colors; Por favor, deferir a su respuesta. Tenga en cuenta que los colores del sistema están en desuso y esa window es el color de fondo predeterminado.

    De acuerdo con la respuesta en este post con respecto al color de fondo del texto resaltado, parece que esto probablemente no sea posible; la pregunta relevante también es una opción específica del navegador de naturaleza muy similar:

    Kaiido:

    Yo diría que no puedes.

    Ambos getComputedStyle (yourElement, ‘:: selection’). BackgroundColor y getComputedStyle (yourElement, ‘:: – moz-selection’). BackgroundColor devolverá el valor predeterminado como transparente y el navegador no anulará el valor predeterminado de os. (Vale la pena mencionar que si lo configura en transparente, el valor predeterminado del sistema operativo será anulado).

    No creo que los navegadores tengan acceso a las preferencias predeterminadas del sistema operativo, y si lo hacen, probablemente no permitirán que ningún sitio web acceda a él tan fácilmente.

    Esta pregunta sugiere usar un elemento de canvas para muestrear el color del píxel, pero desafortunadamente no parece funcionar; en Chrome, devolverá 0,0,0,0 para el color de un píxel no ajustado. Da una solución potencial usando chrome.tabs , pero esto solo está disponible para las extensiones chrome.

    La única posibilidad que se me ocurre sería utilizar algo como HTML2Canvas para ” capturar la pantalla” de la página y probar un píxel vacío allí, pero no hay garantía de que esta biblioteca funcione correctamente para un fondo no configurado.

    Si el elemento

      es un descendiente directo del elemento puede usar css inherit keyword

        ul { background-color: inherit; } 

      Debido a que los comentarios se están haciendo demasiado extensos en las publicaciones de OP, esto es lo que le sugiero que intente:

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

      El uso de su autogestión que se muestra correctamente en las páginas donde no se ha configurado el color de fondo (como la página vacía) debe cubrirse estableciendo el color de fondo predeterminado para su ul . Se vuelve mucho más problemático si desea tener en cuenta posibles imágenes de fondo también.

      Tenga en cuenta que html puede tener un background-color tamaño del body puede ser limitado para que no cubra toda la ventana gráfica. Vea esta pluma:

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

      Esto también ilustra que su expectativa de ver su escritorio detrás de su navegador si el cuerpo era realmente transparente es incorrecto.

      ¡Esto definitivamente resolverá el problema! comprueba cómo funciona la función 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")); }); 
        

        I'd like to know that the background-color here is red