Manipulating attributes with css and javascript

Question

I'm currently learning web development with CSS, HTML and JavaScript.

This is my code:

const items = document.querySelectorAll('#players li');
console.log(items[0], items[1], items[2]);

<section id="players">
  <h1>Test</h1>
  <ol>
    <li>Test1</li>
    <li>Test2</li>
    <li>Test3</li>
  </ol>
</section>

What I want to do is to make a specific list item, let's say the third one to have a specific color. I can't figure out to how to use the style property to set the CSS-property color externally in my JavaScript file.

Hi and welcome to Stack Overflow! Did you know you can achieve your question with CSS only? Is that okay? — Roy
– Roy, Commented May 27, 2020 at 9:55
Something like items[2].style.color = 'red'; to have your third element in red color. See the documentation — Hearner
– Hearner, Commented May 27, 2020 at 9:57

Alessio Cantarella · Accepted Answer · 2020-05-27 09:56:24Z

1

You could apply color through the JavaScript style property, e.g.:

const items = document.querySelectorAll('#players li');
if (items.length > 2) {
  items[2].style.color = "red";
}

<section id="players">
  <h1>Test</h1>
  <ol>
    <li>Test1</li>
    <li>Test2</li>
    <li>Test3</li>
  </ol>
</section>

Or you can achieve the same result just with the CSS nth-child selector:

#players li:nth-child(3) {
  color: red;
}

<section id="players">
  <h1>Test</h1>
  <ol>
    <li>Test1</li>
    <li>Test2</li>
    <li>Test3</li>
  </ol>
</section>

answered May 27, 2020 at 9:56

Alessio Cantarella

5,2413 gold badges31 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brk · Accepted Answer · 2020-05-27 09:58:02Z

1

Iterate items using forEach and check the index. Since the collection starts with 0 for third one you need to check if current index is 2 then use classList.add to add a class and style it

const items = document.querySelectorAll('#players li');
items.forEach((item, index) => {
  if (index === 2) {
    item.classList.add('custom')
  }
})

.custom {
  background: yellow;
}

<section id="players">
  <h1>Test</h1>
  <ol>
    <li>Test1</li>
    <li>Test2</li>
    <li>Test3</li>
  </ol>
</section>

answered May 27, 2020 at 9:58

brk

50.3k10 gold badges59 silver badges85 bronze badges

2 Comments

Alessio Cantarella Over a year ago

Doing a forEach has a O(n)-complexity. Since the index is known in advance, you could simply work with items[2] (O(1)).

user13576861 Over a year ago

How do I use this for-loop to iterate through list-item to use the style-property on these elements to set text-decoration to underline?

Collectives™ on Stack Overflow

Manipulating attributes with css and javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related