document.getElementById("xxx").style

Question

I want to use getElementById("xxx").style.color = "xxx". With this I want to change some css value. But the problem is when i use this and test all same id with this but it does't effect all id and effects only the first one.

Sample code is as follow:

<html>
<body>
<div id = "test">Test</div>
<div id = "test">Test</div>
<div id = "test">Test</div>
<div id = "test">Test</div>
<script>
     document.getElementById("test").style.color = "blue"
</script>
</body>
</html>

What should i do to change all 4 Test to color blue.
AnyIdea pls.
Thanks

Ok i got it bro, I'm just beginner that's why i don't even know the difference of id and class. — Cyber Kingston, May 26 '16 at 09:51
Why dont you want to use jQuery here ? it is more easy then pure javascript while just setting css on that elements — Kirankumar Dafda, May 26 '16 at 09:51
@Kirankumar seeing he only just started html/js coding i guess he doesn't know jQuery — ThomasS, May 26 '16 at 09:56
This works http://chat.stackoverflow.com/transcript/message/30777829#30777829 — Lime, May 26 '16 at 10:09

Quentin · Accepted Answer · 2016-05-26T09:48:17.713

An ID must be unique in an HTML document. Write valid HTML.

To represent multiple, related elements: use a class.

You can then use getElementsByClassName or querySelectorAll to get an array-like object which you can use a for loop to access each element in turn.

var elements = document.querySelectorAll(".test");
for (var i = 0; i < elements.length; i++) {
  elements[i].style.color = "blue";
}

<div class="test">Test</div>
<div class="test">Test</div>
<div class="test">Test</div>
<div class="test">Test</div>

Alternatively, write a stylesheet with a descendant combinator and toggle the classes on a containing element.

document.getElementById("container").classList.add("foo");

.test { color: black; }
.foo .test { color: blue; }

<div id="container">

  <div class="test">Test</div>
  <div class="test">Test</div>
  <div class="test">Test</div>
  <div class="test">Test</div>

</div>

ThomasS · Answer 2 · 2016-05-26T09:51:17.653

0

As stated before, an ID must be unique. If you want to give multiple DOM-elements the same style just use 'class'. you could try this:

<html>

<body>
  <div class="test">Test</div>
  <div class="test">Test</div>
  <div class="test">Test</div>
  <div class="test">Test</div>
  <script>
    var divList = document.getElementsByClassName("test");
    for (var i = 0; i < divList.length; i++) {
      divList[i].style.color = "red";
    }
  </script>
</body>

</html>

to change the style using javascript.

edited May 26 '16 at 09:51

answered May 26 '16 at 09:48

ThomasS

705
1
11
30

The name `divArray` is misleading. It isn't an array. – Quentin May 26 '16 at 09:49
Good point, changed the name to `divList` – ThomasS May 26 '16 at 09:52
@ThomasS If you edit a variable name, please ensure that it gets reflected to the whole code. I still see `divArray` instead of `divList` :-) – KarelG May 26 '16 at 09:54
@KarelG sorry I was just editing it to make it a snippet ;) – ThomasS May 26 '16 at 09:55

John Slegers · Answer 3 · 2016-05-26T09:56:11.150

There are two problems with your code :

id must be unique, so you should use eg. class instead
you should loop across the different elements that are selected

This is my prefered way to correct those two problems :

<html>
  <body>
    <div class="test">Test</div>
    <div class="test">Test</div>
    <div class="test">Test</div>
    <div class="test">Test</div>
    <script>
        Array.prototype.slice.call(
            document.getElementsByClassName("test")
        ).forEach(function(element) {
            element.style.color = "blue"
        });
    </script>
  </body>
</html>

document.getElementById("xxx").style

4 Answers4