Geek Answers Handbook

Get document background color

Most web browsers, by default, display pages as having a white background. However, this is somewhat user-configurable, and some browsers are different. So, I want to find a way using CSS or JavaScript to find out the background color of the page. The documentation on the Mozilla website suggests that you can use document.bgColor, and its default value is white. He also suggests not using it because it is out of date. But the documents seem to contradict the observed behavior: document.bgColor is an empty line if there is no CSS on the page to change it. The proposed alternatives do not work either: everything I tried gives me either an empty string or a “transparent” one, which is clearly wrong: I do not see the desktop under my browser, therefore it is not transparent. (By the way, IE11 actually behaves the same as in the Mozilla documentation, says Firefox does. Go figure.)

I want to create an html list item ( <ul> ) whose background color matches the background color of the document. Is it possible? (I suppose you might be tempted to ask: "If I want it to match the background, I'm not transparent what I want? No. I want it to cover some other element. Why? Because I'm doing one from these auto tips.)

Edit: 2 people wisely suggested adding an example to make it clear what I'm talking about. Based on the answers I received, these 2 people are absolutely right. I added a link to the violin in the comments of one of the answers, and now I am adding it here:

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

+4
source share
5 answers

You can use CSS2 system colors - note that they are deprecated in CSS3, and it is recommended that you use the appearance property instead.

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

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

+4
source

EDIT: Ian Turo found a way to do this using CSS2 system colors; Please postpone his reply. Note that system colors are outdated and that window is the default background color.

Based on the response in this post regarding the background color of the selected text, it seems like this is probably not possible; the corresponding question is also a browser choice with a very similar character:

Kaiido:

I would say that you cannot.

Both getComputedStyle (yourElement, ':: selection'). backgroundColor and getComputedStyle (yourElement, ':: - moz-selection'). backgroundColor will return transparency as the default, and the browser will not override os default. (It is worth noting that if you set transparency, the default os' value will be exceeded).

I don’t think browsers have access to the os default settings, and if they do, they probably won’t allow any website to access it that easily.

This question suggests using the canvas element to select a pixel color, but this, unfortunately, does not work; in Chrome, it will return 0,0,0,0 for the color of an uncleared pixel. It gives a potential solution using chrome.tabs , but it is only available for chrome extensions.

The only possibility I can think of is to use something like HTML2Canvas to “take a screenshot” of the page and try a blank pixel there, but there is no guarantee that this library will work correctly for an unidentified background.

+3
source

If the <ul> element is a direct descendant of the <body> element, you can use css inherit keyword

  ul { background-color: inherit; }
+1
source

Since comments have been finding OPs too long, here's what I suggest you try:

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

The recycling of your autoplay that displays correctly on pages that do not have a background color (such as a blank page) should be covered by setting the default white background color for your ul . This becomes even more problematic if you also want to consider possible background images.

Also remember that html may have background-color , and body may be limited in size so as not to cover the entire viewport. Look at this pen:

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

It also illustrates that your expectation of seeing your desktop behind your browser if the body was truly transparent is incorrect.

0
source

This will definitely solve the problem! check how js function works

 function getBackground(jqueryElement) { // Is current element 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>

I kept a tip for your better understanding.

0
source

More articles:


All Articles