Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #28903 > unrolled thread

Change all background-color attribute values

Back to article view | Back to comp.lang.javascript

Contents

  Change all background-color attribute values Janis Papanagnou <janis_papanagnou@hotmail.com> - 2015-11-22 15:24 +0100
    Re: Change all background-color attribute values Martin Honnen <mahotrash@yahoo.de> - 2015-11-22 16:19 +0100
      Re: Change all background-color attribute values Janis Papanagnou <janis_papanagnou@hotmail.com> - 2015-11-22 16:38 +0100
        Re: Change all background-color attribute values Martin Honnen <mahotrash@yahoo.de> - 2015-11-22 17:02 +0100
          Re: Change all background-color attribute values Janis Papanagnou <janis_papanagnou@hotmail.com> - 2015-11-22 18:18 +0100
            Re: Change all background-color attribute values Martin Honnen <mahotrash@yahoo.de> - 2015-11-22 19:27 +0100
            Re: Change all background-color attribute values Scott Sauyet <scott.sauyet@gmail.com> - 2015-11-22 11:33 -0800
              Re: Change all background-color attribute values Janis Papanagnou <janis_papanagnou@hotmail.com> - 2015-11-23 16:01 +0100
    Re: Change all background-color attribute values JJ <jj4public@vfemail.net> - 2015-11-22 22:32 +0700
      Re: Change all background-color attribute values JJ <jj4public@vfemail.net> - 2015-11-22 22:47 +0700
        Re: Change all background-color attribute values Janis Papanagnou <janis_papanagnou@hotmail.com> - 2015-11-22 16:54 +0100
      Re: Change all background-color attribute values Janis Papanagnou <janis_papanagnou@hotmail.com> - 2015-11-22 16:49 +0100
    Re: Change all background-color attribute values Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-11-23 01:11 +0000
      Re: Change all background-color attribute values Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-11-23 11:27 +0000

#28903 — Change all background-color attribute values

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?

Thanks for any hints.

Janis

[toc] | [next] | [standalone]

#28904

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?


I don't think in HTML 4 or HTML5 any element has an attribute named 
"background-color", in HTML 4 some elements like the `body` element and 
the `td` elements have a deprecated `bgColor` attribute, 
http://www.w3.org/TR/html4/present/graphics.html#adef-bgcolor.

In general you would use CSS and the "background-color" property, 
usually with CSS rules for certain elements or element belonging to a 
certain class. You could then manipulate the CSS rules or add new ones. 
Brute force would probably adding a rule

var style = document.createElement('style');
style.textContent = '* { background-color: darkblue !important }'; 
document.documentElement.children[0].appendChild(style);

Of course you seem to want to read out the existing background-color, as 
there is no such attribute that is not going to work the way you have 
shown it, and with CSS you would need to decide which value you want to 
read out, one set directly as an inline style 
(element.style.backgroundColor), one set in a certain rule, the computed 
one.

[toc] | [prev] | [next] | [standalone]

#28906

On 22.11.2015 16:19, Martin Honnen wrote:
> 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?
> 
> 
> I don't think in HTML 4 or HTML5 any element has an attribute named
> "background-color", in HTML 4 some elements like the `body` element and the
> `td` elements have a deprecated `bgColor` attribute,
> http://www.w3.org/TR/html4/present/graphics.html#adef-bgcolor.
> 
> In general you would use CSS and the "background-color" property, usually with
> CSS rules for certain elements or element belonging to a certain class. You
> could then manipulate the CSS rules or add new ones. Brute force would
> probably adding a rule
> 
> var style = document.createElement('style');
> style.textContent = '* { background-color: darkblue !important }';
> document.documentElement.children[0].appendChild(style);

Thanks for your response. To clarify my intention; I have a HTML definition

  <style type="text/css">
  .U { background-color: #fafafa }
  .V { background-color: #f7f7f7 }
  ...
  </style>
  ...
    <td class="U" ...>
    <td class="V" ...>

and want to add GUI controls and javascript code to dynamically change the
predefined definition of all 'background-color' values, depending on its
respective previous value.

> 
> Of course you seem to want to read out the existing background-color, as there
> is no such attribute that is not going to work the way you have shown it, and
> with CSS you would need to decide which value you want to read out, one set
> directly as an inline style (element.style.backgroundColor), one set in a
> certain rule, the computed one.

I was aware that the code I posted will not work; as I said it was informal,
with the purpose to describe what I would like to achieve. Since I'm not that
familiar with javascript pointers to concrete constructs would help me a lot.
I hope the additional information clarifies the issue and my intention.

Janis

[toc] | [prev] | [next] | [standalone]

#28910

Janis Papanagnou wrote:

>    <style type="text/css">
>    .U { background-color: #fafafa }
>    .V { background-color: #f7f7f7 }
>    ...
>    </style>
>    ...
>      <td class="U" ...>
>      <td class="V" ...>
>
> and want to add GUI controls and javascript code to dynamically change the
> predefined definition of all 'background-color' values, depending on its
> respective previous value.

document.getElementsByClassName('U') would give you all elements having 
that class 'U'.

The stylesheets belonging to a document can be found with 
document.styleSheets collection so that `style` element will be in there.

[toc] | [prev] | [next] | [standalone]

#28911

On 22.11.2015 17:02, Martin Honnen wrote:
> Janis Papanagnou wrote:
> 
>>    <style type="text/css">
>>    .U { background-color: #fafafa }
>>    .V { background-color: #f7f7f7 }
>>    ...
>>    </style>
>>    ...
>>      <td class="U" ...>
>>      <td class="V" ...>
>>
>> and want to add GUI controls and javascript code to dynamically change the
>> predefined definition of all 'background-color' values, depending on its
>> respective previous value.
> 
> document.getElementsByClassName('U') would give you all elements having that
> class 'U'.
> 
> The stylesheets belonging to a document can be found with document.styleSheets
> collection so that `style` element will be in there.

Ah, okay. So I understand that in this case I will have to do that for each
of the respective classes (more than a dozen) - i.e. there's no formal
shortcut -, and then also iterate over every element of the respective class
(about 10 elements per class) to change its respective value. I'll try this
as well. Thanks.

Janis

[toc] | [prev] | [next] | [standalone]

#28912

Janis Papanagnou wrote:
> On 22.11.2015 17:02, Martin Honnen wrote:
>> Janis Papanagnou wrote:
>>
>>>     <style type="text/css">
>>>     .U { background-color: #fafafa }
>>>     .V { background-color: #f7f7f7 }
>>>     ...
>>>     </style>
>>>     ...
>>>       <td class="U" ...>
>>>       <td class="V" ...>
>>>
>>> and want to add GUI controls and javascript code to dynamically change the
>>> predefined definition of all 'background-color' values, depending on its
>>> respective previous value.
>>
>> document.getElementsByClassName('U') would give you all elements having that
>> class 'U'.
>>
>> The stylesheets belonging to a document can be found with document.styleSheets
>> collection so that `style` element will be in there.
>
> Ah, okay. So I understand that in this case I will have to do that for each
> of the respective classes (more than a dozen) - i.e. there's no formal
> shortcut -, and then also iterate over every element of the respective class
> (about 10 elements per class) to change its respective value. I'll try this
> as well. Thanks.


No, the CSS rules are accessible to script, see 
http://jsfiddle.net/95rs478f/ which searches for a stylesheet in 
document.styleSheets with a rule with a certain CSS selectorText and 
then manipulate a CSS property in that rule. So you don't have to change 
the property on each element having a certain class.

The only drawback is that old IE versions have a slightly different API 
to access stylesheets, I am not sure since the W3C approach I used works 
in IE, for IE 11 and Edge the sample works the same as in Firefox and 
Chrome. I think the approach works since IE 9 or IE 8, not sure.

[toc] | [prev] | [next] | [standalone]

#28913

Janis wrote:
> Martin Honnen wrote:
>> document.getElementsByClassName('U') would give you all elements having that
>> class 'U'.
> 
> Ah, okay. So I understand that in this case I will have to do that for each
> of the respective classes (more than a dozen) - i.e. there's no formal
> shortcut -, and then also iterate over every element of the respective class
> (about 10 elements per class) to change its respective value. I'll try this
> as well. Thanks.

Martin's other suggestion, of using the script access to the CSS rules, is
probably a better bet.  But if you choose this technique, while there is no
formal shortcut, you could make it somewhat less painful by using something
like

    var getByClass = document.getElementsByClassName.bind(document);
    var classes = ['U', 'V' /*, ... */];
    var elements = classes.map(getByClass);

`elements` will now contain an array of HTMLCollections of elements matching
one of your classes.

  -- Scott

[toc] | [prev] | [next] | [standalone]

#28917

On 22.11.2015 20:33, Scott Sauyet wrote:
> Janis wrote:
>> Martin Honnen wrote:
>>> document.getElementsByClassName('U') would give you all elements having that
>>> class 'U'.
>>
>> Ah, okay. So I understand that in this case I will have to do that for each
>> of the respective classes (more than a dozen) - i.e. there's no formal
>> shortcut -, and then also iterate over every element of the respective class
>> (about 10 elements per class) to change its respective value. I'll try this
>> as well. Thanks.
> 
> Martin's other suggestion, of using the script access to the CSS rules, is
> probably a better bet.  But if you choose this technique, while there is no
> formal shortcut, you could make it somewhat less painful by using something
> like
> 
>     var getByClass = document.getElementsByClassName.bind(document);
>     var classes = ['U', 'V' /*, ... */];
>     var elements = classes.map(getByClass);
> 
> `elements` will now contain an array of HTMLCollections of elements matching
> one of your classes.
> 
>   -- Scott
> 

Martin, Scott, Thomas, thanks for the additional clarifications and
suggestions. Indeed it seems much better to directly change the CSS rules,
which is exactly what I hoped to be possible. Good to know those methods.

Janis

PS:
As a note aside, I meanwhile also found an alternative approach to obtain
the function I want without tackling the DOM. I can use the "alternative
stylesheet" definition method and instead of writing own GUI controls and
DOM manipulations I can select the style changes from the browser menus
(i.e. [only] from those browsers that support this function). While not
as powerful as full control over the individual CSS rules, in my case
it's feasible to use this static method since I only have a small set of
CSS definitions to choose from. But this is off-topic here, so I posted
a question (about the concrete semantics in case of common definitions)
in the alt.html newsgroup.

[toc] | [prev] | [next] | [standalone]

#28905

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?
> 
> Thanks for any hints.
> 
> Janis

IMO, there's no simple solution. It depends on how the web page was created.
How the background color was previously applied.

If the background color was applied using the BGCOLOR HTML attribute, or if
there is no background color applied to any of the elements, you can apply a
CSS backgrould-color rule for all elements. The CSS will override the
BGCOLOR attribute. e.g.

  * { background-color : orange }

By adding a new STYLE element containing the above CSS. e.g.

  var ele = document.createElement("STYLE");
  ele.innerHTML = "* { background-color : orange }";
  document.body.appendChild(ele);

However, if background color was applied specifically to an element like
this:

  #sidebar .section { background-color : yellow }

The above rule will take priority over the "*" (all elements) CSS element
selector because the selector is more specific. So in this case, you'll have
to override the CSS rule with that specific selector (the "#sidebar
.section"). So instead of:

  * { background-color : orange }

Use this instead:

  #sidebar .section { background-color : orange }

Also, if the previous CSS rule has "!important" in it, you'll have to
include it also, otherwise the rule with that keyword will take precedence.
e.g.

  #sidebar .section { background-color : orange !important }

Finally, put the newly created STYLE element at the end of the web page, as
the last of the BODY element.

To know which CSS rule is applied to an element, use the web browser's
"Inspect element" function. i.e. Right-click on an element with the
background color applied, then choose "Inspect element" on the popup menu.
Look for "background-color" or "background" CSS attribute.

[toc] | [prev] | [next] | [standalone]

#28907

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?
>> 
>> Thanks for any hints.
>> 
>> Janis
> 
> IMO, there's no simple solution. It depends on how the web page was created.
> How the background color was previously applied.
> 
> If the background color was applied using the BGCOLOR HTML attribute, or if
> there is no background color applied to any of the elements, you can apply a
> CSS backgrould-color rule for all elements. The CSS will override the
> BGCOLOR attribute. e.g.
> 
>   * { background-color : orange }
> 
> By adding a new STYLE element containing the above CSS. e.g.
> 
>   var ele = document.createElement("STYLE");
>   ele.innerHTML = "* { background-color : orange }";
>   document.body.appendChild(ele);
> 
> However, if background color was applied specifically to an element like
> this:
> 
>   #sidebar .section { background-color : yellow }
> 
> The above rule will take priority over the "*" (all elements) CSS element
> selector because the selector is more specific. So in this case, you'll have
> to override the CSS rule with that specific selector (the "#sidebar
> .section"). So instead of:
> 
>   * { background-color : orange }
> 
> Use this instead:
> 
>   #sidebar .section { background-color : orange }
> 
> Also, if the previous CSS rule has "!important" in it, you'll have to
> include it also, otherwise the rule with that keyword will take precedence.
> e.g.
> 
>   #sidebar .section { background-color : orange !important }
> 
> Finally, put the newly created STYLE element at the end of the web page, as
> the last of the BODY element.
> 
> To know which CSS rule is applied to an element, use the web browser's
> "Inspect element" function. i.e. Right-click on an element with the
> background color applied, then choose "Inspect element" on the popup menu.
> Look for "background-color" or "background" CSS attribute.

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.

[toc] | [prev] | [next] | [standalone]

#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

[toc] | [prev] | [next] | [standalone]

#28908

On 22.11.2015 16:32, 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?
>>
>> Thanks for any hints.
>>
>> Janis
> 
> IMO, there's no simple solution. It depends on how the web page was created.
> How the background color was previously applied.

I have control over the webpage creation, and I can make changes if that helps
to achieve what I want. Currently I have HTML definitions like

  <style type="text/css">
  .U { background-color: #fafafa }
  .V { background-color: #f7f7f7 }
  ...
  </style>
  ...
    <td class="U" ...>
    <td class="V" ...>

Those <style> definitions are the only 'background-color' items in the whole
HTML code, so a brute force method (while ugly) could be applied as well (in
case that's possible).

> 
> If the background color was applied using the BGCOLOR HTML attribute, or if
> there is no background color applied to any of the elements, you can apply a
> CSS backgrould-color rule for all elements. The CSS will override the
> BGCOLOR attribute. e.g.
> 
>   * { background-color : orange }
> 
> By adding a new STYLE element containing the above CSS. e.g.
> 
>   var ele = document.createElement("STYLE");
>   ele.innerHTML = "* { background-color : orange }";
>   document.body.appendChild(ele);

I'm puzzled about this suggestion (one that the other poster also suggested),
because I don't want to create anything new but just change existing values.

> [HTML/CSS precedence information snipped]

Thanks for your reply.

Janis

[toc] | [prev] | [next] | [standalone]

#28915

Janis Papanagnou wrote:

> I want to iterate over the DOM to change all background-color attribute
> values,

There is no ”background-color” attribute.

> (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?

Yes.

> Or maybe even simpler, without addressing the objects but just change all
> existing background-color attributes?

No.  But you can change all declared ”background-color” values.
 
> Thanks for any hints.

  [].slice.call(nodeList).forEach(function (node) {
    var bgColor = document.defaultView.getComputedStyle(
      node, null).getPropertyValue("background-color");
    if (bgColor) node.style.backgroundColor = some_funct(bgColor);
  });

or

  [].slice.call(document.styleSheets).forEach(function (styleSheet) {
    [].slice.call(styleSheet.cssRules || styleSheet.rules, function (rule) {
      var bgColor = rule.style["background-color"];
      if (bgColor) rule.style["background-color"] = some_funct(bgColor);
    });
  });

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#28916

Thomas 'PointedEars' Lahn wrote:

>   [].slice.call(document.styleSheets).forEach(function (styleSheet) {
>     [].slice.call(styleSheet.cssRules || styleSheet.rules, function (rule)
>     [{
>       var bgColor = rule.style["background-color"];
>       if (bgColor) rule.style["background-color"] = some_funct(bgColor);
>     });
>   });

Correction:

  var _slice = [].slice;
  _slice.call(document.styleSheets).forEach(function (styleSheet) {
    _slice.call(styleSheet.cssRules || styleSheet.rules).forEach(
      function changeRule (rule) {
        /* @media, @keyframes etc. rules */
        if (rule.cssText.substring(0, 1) == "@")
        {
          return _slice.call(rule.cssRules).forEach(changeRule);
        }

        var bgColor = rule.style.backgroundColor;
        if (bgColor) rule.style.backgroundColor = some_funct(bgColor);
      });
  });

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web