Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #35541
| From | Cezary Tomczyk <cezary.tomczyk@gmail.com> |
|---|---|
| Newsgroups | comp.lang.javascript |
| Subject | Re: Finding a real background color of an element |
| Date | 2018-08-22 19:01 +0200 |
| Organization | csiph.com Internet News Service |
| Message-ID | <plk4ts$45p$1@csiph.com> (permalink) |
| References | <plhirc$1e8i$1@csiph.com> <1ubqz126avwqd$.1ba1f0ac07trn$.dlg@40tude.net> |
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 <h1> 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 <h1> 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 <https://github.com/niklasvh/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/
Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread
Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-08-21 19:40 +0200
Re: Finding a real background color of an element "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-08-21 21:14 -0700
Re: Finding a real background color of an element JJ <jj4public@vfemail.net> - 2018-08-22 14:32 +0700
Re: Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-08-22 19:01 +0200
Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-08-22 11:37 -0700
Re: Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-08-23 07:52 +0200
Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-08-23 04:54 -0700
Re: Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-08-24 19:09 +0200
Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-03 03:55 -0700
Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-03 04:28 -0700
Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-03 05:09 -0700
Re: Finding a real background color of an element "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-09-02 12:40 -0700
Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-03 03:51 -0700
Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-03 03:55 -0700
Re: Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-09-04 18:52 +0200
Re: Finding a real background color of an element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-08-29 22:12 +0200
Re: Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-08-31 22:30 +0200
Re: Finding a real background color of an element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-09-02 05:09 +0200
Re: Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-09-02 19:57 +0200
Re: Finding a real background color of an element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-09-03 15:09 +0200
Re: Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-09-04 19:02 +0200
Re: Finding a real background color of an element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-09-04 22:15 +0200
Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-04 22:48 -0700
Re: Finding a real background color of an element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-09-08 15:39 +0200
Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-08 06:57 -0700
Re: Finding a real background color of an element Richard Damon <Richard@Damon-Family.org> - 2018-09-08 13:32 -0400
Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-08 10:43 -0700
Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-08 10:44 -0700
Re: Finding a real background color of an element Richard Damon <Richard@Damon-Family.org> - 2018-09-08 14:23 -0400
Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-08 11:31 -0700
Re: Finding a real background color of an element Richard Damon <Richard@Damon-Family.org> - 2018-09-08 17:59 -0400
Re: Finding a real background color of an element Silvio <silvio@internet.com> - 2018-09-04 22:05 +0200
csiph-web