Path: csiph.com!.POSTED.208-71-239-109.cust.centrio.cz!not-for-mail From: Cezary Tomczyk Newsgroups: comp.lang.javascript Subject: Re: Finding a real background color of an element Date: Wed, 22 Aug 2018 19:01:47 +0200 Organization: csiph.com Internet News Service Message-ID: References: <1ubqz126avwqd$.1ba1f0ac07trn$.dlg@40tude.net> Mime-Version: 1.0 Content-Type: text/plain; charset=utf-8; format=flowed Content-Transfer-Encoding: 7bit Injection-Date: Wed, 22 Aug 2018 17:01:48 -0000 (UTC) Injection-Info: csiph.com; posting-host="208-71-239-109.cust.centrio.cz:109.239.71.208"; logging-data="4281"; mail-complaints-to="admin@kev009.com" User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:52.0) Gecko/20100101 Thunderbird/52.9.1 In-Reply-To: <1ubqz126avwqd$.1ba1f0ac07trn$.dlg@40tude.net> Content-Language: en-US Xref: csiph.com comp.lang.javascript:35541 On 22/08/2018 09:32, JJ wrote: > On Tue, 21 Aug 2018 19:40:59 +0200, Cezary Tomczyk wrote: >> I am trying to figure it out how to determine a real background color of >> an element that is visible on the screen. >> >> Here is a code example: >> https://jsbin.com/mahabiyumi/edit?html,js,console,output >> >> The trouble with determining background color is that it doesn't have to >> have same value as the user sees on the screen. In above example the >> element

is visibly on the white background and >> >> 1) it has defined rgba(0, 0, 0, 0) by default >> 2) all parents are having also defined rgba(0, 0, 0, 0) by default >> >> but I can clearly see that

is having a white background color. >> >> Note: I do skip elements that have defined position absolute or fixed. >> >> Any suggestions are very welcome. > > You'll have to check the specified element first, then check its parent > element, and repeat that until you have a non transparent background color. > Exclude the HTML element, because styles do not apply to that element. Once > you have a non transparent background color, return that color. e.g. > > function getBackgroundColor(ele) { > var color = "transparent"; > while (ele !== document.documentElement) { > color = getComputedStyle(ele).backgroundColor; > ele = ele.parentNode; > } > return color; > } > > Keep in mind, that a document may have transparent background color. In this > case, the web browser's default background color is used. Or if the document > is served in an IFRAME element, then the IFRAME element's background color > is used. While in some conditions, the IFRAME element's background color can > be retrieved, it's not possible to retrieve the web browser's default color > - since it's not exposed to document scripts. That's exactly what I've done - process parent's until "body" and until the background color is founded. However, yes - the transparent and not being able to get default background color is the issue I am facing now. > The method which takes screenshot with canvas, also has this limitation. For > example, using html2canvas to > render that H1 element on JSBin. The result will also have transparent > background in its image data. And there's no way to retrieve the IFRAME's > background color because the IFRAME is served on a document which is in a > different domain. That means to me that there is no reliable way to get a real background color of the HTML element. :/ -- Cezary Tomczyk http://www.ctomczyk.pl/