I can't change color via JS

Question

I want to change every color and background-color property which are rgb(22, 160, 133), #16a085, #16a085 !important, #16a085!important . However, I couldn't it.

I want to give a real example:

http://www.hekim.deniz-tasarim.site/

On header, there are 4 example sentence.I didnt write example code for background-color property yet, they are for only color property.

My js code:

      jQuery(document).ready(function(){

});

    function CommentStyle2() {
      alert("1Hello! I am an alert box!!");
      document.querySelectorAll('*').forEach(function(node) {
     let cara = window.getComputedStyle(node);
     let lara = cara.getPropertyValue('color');
     if (lara === 'rgb(22, 160, 134)')
      alert(lara);
         lara = 'blue';

});

    }

    window.onload = CommentStyle2;

I said it before, I write 4 example text which have the color propery so When refresh the website, it gives 4 alert message but the color doesnt change to blue.

Why? How can I solve it?

I give the html code for the example text on header:

  <style>
        .rgb-h2-class{
            color:rgb(22, 160, 134);
        }
        .sharp-color-class{
            color:#16a086;
        }
    </style>
    <h1 style="color:rgb(22, 160, 134);">h1 text which has color:rgb(22, 160, 134)</h1>
    <h2 class="rgb-h2-class">h2 text which has rgb-h2-class</h2>
    <h1 style="color:#16a086;">h1 text which has color:#16a086;</h1>
    <h2 class="sharp-color-class">h2 text which has sharp-color-class</h2>

TheMisir · Accepted Answer · 2020-06-13T01:08:18.030

0

You need to set node color after checking it's current color. To set node color you can use node.style.color property.

function CommentStyle2() {
  document.querySelectorAll('*').forEach(function(node) {
    const style = window.getComputedStyle(node);
    const color = style.getPropertyValue('color');

    if (color === 'rgb(22, 160, 134)') {
      const oldStyle = node.getAttribute('style');
      node.setAttribute('style', oldStyle + ';color: blue!important');
    }
  });
}

window.onload = CommentStyle2;

.rgb-h2-class {
  color: rgb(22, 160, 134);
}

.sharp-color-class {
  color: #16a086 !important;
}

<h1 style="color:rgb(22, 160, 134);">h1 text which has color:rgb(22, 160, 134)</h1>
<h2 class="rgb-h2-class">h2 text which has rgb-h2-class</h2>
<h1 style="color:#16a086;">h1 text which has color:#16a086;</h1>
<h2 class="sharp-color-class">h2 text which has sharp-color-class</h2>
<p style="color: red">Not this</p>

Please check this question to read more about overriding !important values.

edited Jun 13 '20 at 01:08

answered Jun 12 '20 at 21:25

TheMisir

4,083
1
27
37

The example texts color changed but the real goals which green texts on website didnt change.For example, there are green icons which has rgb(22, 160, 134) color property, they didnt change.Why? -I give rgb(22, 160, 134) as an example color, but the green things on website has rgb(22, 160, 133) color. * not 134, it is 133.* . – Javascript Asking Account Jun 12 '20 at 21:38
The blue color propert seem as over-lined (passive) on chrome developer tools.Green color has !important value.When I add !important word to your js code, the new value doesnt seem anyway.How can I write the property in js code over to css code even it is important – Javascript Asking Account Jun 12 '20 at 21:51
@JavascriptAskingAccount please check updated answer above – TheMisir Jun 13 '20 at 01:08

I can't change color via JS

1 Answers1