JS change all 'p' color

Question

i want to change color all 'p' elements, i tried do it with this code but it not works.

document.getElementsByTagName('p').forEach(element => {
 element.style.color = 'white'
});

Is there a right way(without using JQuery)?

`document.querySelectorAll('p').style.color = 'white'` try that way. — Vladimir Jovanović, Jun 23 '18 at 21:14
^ this returns a `NodeList`, not an `HTMLCollection`, which **can** be iterated over. You can't just set the `style.color` for the `NodeList`, though! — chemicalcrux, Jun 23 '18 at 21:16
Yeah, you're right @chemicalcrux. My bad. But this code works `document.querySelectorAll('p').forEach(e => e.style.color = "white")` — Vladimir Jovanović, Jun 23 '18 at 21:17
First, that is not jQuery, second, how is that code piece not working? ... Provide a code snippet reproducing the issue described. — Asons, Jun 23 '18 at 21:47

Vladimir Jovanović · Accepted Answer · 2018-06-23T21:38:48.047

3

You can accomplish this using the vanilla JavaScript ES2015 (ES6) code.

document.querySelectorAll('p').forEach(e => e.style.color = "white");

UPDATE:

I forgot to mention that this is applying white color of the element in the DOM which is not so efficient, so you can also do this in another way.

CSS:

.white {
  color: #fff;
}

JavaScript:

// If you have just one class for the element
document.querySelectorAll('p').forEach(e => e.className = 'white');

// If you are appending the class of `white`
document.querySelectorAll('p').forEach(e => e.className += ' white');

edited Jun 23 '18 at 21:38

answered Jun 23 '18 at 21:20

Vladimir Jovanović

5,143
5
21
42

@H.Denision But this is not compatible in older browsers. Still, suggest adding Array.from() – Sandeep Ranjan Jun 23 '18 at 21:37
1

@SandeepRanjan Your answer is written in ES6 code and ES6 is not compatible with older browsers. – Vladimir Jovanović Jun 23 '18 at 21:43

score 2 · Answer 2 · answered Jun 23 '18 at 21:14

You can do the same like this

var list= document.getElementsByTagName('p');
for (var i = 0; i < list.length; i++) {
    list[i].style.color = "white";
}

As document.getElementsByTagName returns HTMLCollection type object you have to iterate using above method as per this answer

score 1 · Answer 3 · answered Jun 23 '18 at 21:14

1

You can't iterate over the HTMLCollection returned by getElementsByTagName. Converting it to an Array will work, though. Use Array.from() to do this:

Array.from(document.getElementsByTagName('p')).forEach(element => { element.style.color = 'white' });

answered Jun 23 '18 at 21:14

chemicalcrux

185
10

1

you can also just use a for ... of loop for(let element of document.getElementsByTagName('p')) { element.style.color = 'yellow' } – evayly Jun 23 '18 at 21:15

score 1 · Answer 4 · answered Jun 23 '18 at 21:15

1

All you have to do here is to make a simple loop.

let el = document.getElementsByTagName('p')
let i

for (i = 0; i < el.length; i++) {
    el[i].style.color = 'white'
}

answered Jun 23 '18 at 21:15

robertgrzonka

172
8

score 0 · Answer 5 · answered Jun 23 '18 at 21:29

document.getElementsByTagName('p')

Return HTMLCollection(6) [p, p, p, p, p, p.left] This is a HTML Collection. So if you check

document.getElementsByTagName('p') instanceof Array

It returns false.

As HTML Collections are not array's so you cannot perform .forEach().

So you must convert it into an array by using Array.from().

The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object.

Array.from(document.getElementsByTagName('p')).forEach(element => {
 element.style.color = 'white'
});

So this is the solution for your problem.

JS change all 'p' color

5 Answers5

Linked