Path: csiph.com!eternal-september.org!feeder.eternal-september.org!aioe.org!.POSTED!not-for-mail
From: Janis Papanagnou <janis_papanagnou@hotmail.com>
Newsgroups: comp.lang.javascript
Subject: Re: Change all background-color attribute values
Date: Sun, 22 Nov 2015 16:54:36 +0100
Organization: Aioe.org NNTP Server
Lines: 47
Message-ID: <n2sofq$c18$1@speranza.aioe.org>
References: <n2sj7k$ttl$1@speranza.aioe.org> <1s2gno1nefvn1$.1wp02kmbye2jj$.dlg@40tude.net> <18op3m76w32qo.10dht9devezte.dlg@40tude.net>
NNTP-Posting-Host: Wk0HckxFqUVe/E2PafJrEw.user.speranza.aioe.org
Mime-Version: 1.0
Content-Type: text/plain; charset=windows-1252
Content-Transfer-Encoding: 7bit
X-Complaints-To: abuse@aioe.org
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:38.0) Gecko/20100101 Thunderbird/38.3.0
X-Notice: Filtered by postfilter v. 0.8.2
Xref: csiph.com comp.lang.javascript:28909

On 22.11.2015 16:47, JJ wrote:
> On Sun, 22 Nov 2015 22:32:29 +0700, JJ wrote:
> 
>> On Sun, 22 Nov 2015 15:24:53 +0100, Janis Papanagnou wrote:
>>> I want to iterate over the DOM to change all background-color attribute
>>> values, (informally written) something like
>>>
>>>   for (obj in DOM)
>>>     if (obj.hasAttribute(background-color))
>>>       obj.background-color = some_funct(obj.background-color)
>>>
>>> Is there a way to achieve that in such a simple form? Or maybe even simpler,
>>> without addressing the objects but just change all existing background-color
>>> attributes?
>>>
>>> [...]
>>
>> [...]
> 
> Also, if the CSS rule was applied inline on the element itself, with the
> "!important" keyword, e.g.
> 
>   <div style="background-color:yellow!important">abc</div>
> 
> .. any CSS override in a STYLE element will not be applied in this case. So
> you'll need to directly change the STYLE attribute value for that element by
> changing the element.style.backgroundColor property.
> 
> This will require searching all element for any STYLE attribute which
> contains the background-color or background CSS attribute. You can start by
> using document.querySelectorAll() function to gather elements with a
> specific attribute name and value. e.g.
> 
>   var eles = document.querySelectorAll('[style*="background"]');
>   for (var i = 0; i < eles.length-1; i++) {
>     eles[i].style.backgroundColor = "orange!important";
>   }
> 
> The above [style*="background"] CSS selector means all elements with a STYLE
> attribute whose value contains "background" in it (see MDN for more info).
> It's not an accurate selector, but it's better than checking all elements
> manually.

Thanks also for this suggestion; it looks promising. I'll try it... :-)

Janis