Управление атрибутами с помощью css и javascript

Question

В настоящее время я изучаю веб-разработку с CSS, HTML и JavaScript.

Это мой код:

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>

Что я хочу сделать, так это создать определенный элемент списка c, скажем, третий, имеющий определенный цвет c. Я не могу понять, как использовать свойство style для установки CSS -свойства color извне в моем файле JavaScript.

Answer 1

Выполните итерацию items, используя forEach, и проверьте index. Поскольку коллекция начинается с 0 для третьего, вам нужно проверить, равен ли текущий индекс 2, затем использовать classList.add, чтобы добавить класс и стилизовать его

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>

Answer 2

Вы можете применить color через свойство JavaScript style, например:

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>

Или вы можете достичь того же результата с помощью селектора CSS nth-child:

#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>