0

So say I have this in my body:

<body>
<h1>Hello world!</h1>
<h2 style="color: Blue;">This is my webpage</h2>
<a style="color: Blue;" onClick="changeElem();">Welcome!</a><br>
<h3>Goodbye</h3>
</body>

I want to create function changeElem() such that it will change the content that is blue to black. So this is the result I want to get after using this function:

<h1>Hello world!</h1>
<h2 style="color: Black;">This is my webpage</h2>
<a style="color: Black;" onClick="changeElem();">Welcome!</a><br>
<h3>Goodbye</h3>

How can this be done?

Neel
  • 11,625
  • 3
  • 43
  • 61
chris97ong
  • 6,870
  • 7
  • 32
  • 52
  • 1
    [http://stackoverflow.com/questions/10767701/javascript-css-get-element-by-style-attribute](http://stackoverflow.com/questions/10767701/javascript-css-get-element-by-style-attribute) – Batu.Khan Apr 04 '14 at 09:45
  • If you use it in `onLoad` , then why just set it at the first place? – xdazz Apr 04 '14 at 09:45
  • 1
    You should avoid inline styles in the first place. Use CSS and then traversing by classes and manipulating them is straightforward. – ElmoVanKielmo Apr 04 '14 at 09:50

3 Answers3

2

You're much better off doing this with CSS, not inline styles.

<head>
<style>
/* By default, elements with class="some-class" are blue */
.some-class {
    color: blue;
}

/* But if body has the class "updated", they turn black */
body.updated .some-class {
    color: black;
}
</style>
<h1>Hello world!</h1>
<h2 class="some-class">This is my webpage</h2>
<a class="some-class" onClick="changeElem();">Welcome!</a><br>
<h3>Goodbye</h3>
</body>

...where changeElem is:

function changeElem() {
    document.body.className += " updated";
}

Live Example | Live Source

If you're dead set on using inline styles, which is not a good idea, you can still do it easily enough:

function changeElem() {
    var div, colorValue, list, index, element;

    // Figure out what this browser returns for `color: Blue`
    // (it might be "Blue", "blue", "rgb(0, 0, 255)",
    // "rgba(0, 0, 255, 0)", "#0000FF", "#0000ff",
    // or possibly others)
    div = document.createElement('div');
    document.body.appendChild(div);
    div.innerHTML = '<span style="color: Blue;"></span>';
    colorValue = div.firstChild.style.color;
    document.body.removeChild(div);

    // Get list of all elements that have any `style` attribute at all
    list = document.querySelectorAll('[style]');

    // Loop through looking for our target color
    for (index = 0; index < list.length; ++index) {
        element = list[index];
        if (element.style.color === colorValue) {
            element.style.color = "black";
        }
    }
}

Live Example | Live Source

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 1
    @chris97ong and this is your biggest mistake – ElmoVanKielmo Apr 04 '14 at 09:50
  • @chris97ong: CSS (and specifically classes, in this case) are how this sort of thing is done. I've added an option for you working with styles. Note how awkward it is. That *why* this is done properly with CSS. – T.J. Crowder Apr 04 '14 at 09:57
  • @T.J.Crowder Thx for your help. Sorry but how do I modify your code if I only want elements with tag name `h2` to be black? – chris97ong Apr 04 '14 at 10:05
  • @chris97ong: Happy to help. The string we pass into `querySelectorAll` is a [CSS selector](http://www.w3.org/TR/css3-selectors/), so anything we could identify with style sheet rule, we can select with that function. The selector `[style]` selects *any* element with a `style` attribute; to limit it to `h2` elements, we do `h2[style]`. – T.J. Crowder Apr 04 '14 at 10:21
0

I suggest working with Class Selectors. 

<body onLoad="getElem();">
<h1>Hello world!</h1>
<h2 class="blue">This is my webpage</h2>
<a class="blue">Welcome!</a><br>
<h3>Goodbye</h3>
</body>

Then you could easily select all Elements with a common class via document.querySelectorAll():

document.querySelectorAll(".blue")

for all Elements with the class blue (e.g.)

Then you could set the class of each element simply to black.

Thomas Junk
  • 5,588
  • 2
  • 30
  • 43
0
 function getElem(){
   var items = document.body.getElementsByTagName("*");
   for (var i = items.length; i--;) {
     style = window.getComputedStyle(items[i].innerHTML);
     color = style.getPropertyValue('color');
     if(color =="rgb(0,0,255)"){ 
        items[i].style.color="black";
       }
   }   
  }
radia
  • 1,456
  • 1
  • 13
  • 18