Найти бордюр для всех <li> - PullRequest
Новая
       20

Найти бордюр для всех <li>

0 голосов
/ 26 мая 2018

Я сожалею об этом, я только начал JS, и на самом деле я чего-то не понимаю

Я хотел бы найти все цвета моей границы li

HTML: 

  <li><a href="#"><i class="fas fa-home"></i></a></li>
  <li><a href="#"><i class="fas fa-user"></i></a></li>
  <li><a href="#"><i class="fas fa-briefcase"></i></a></li>
  <li><a href="#"><i class="far fa-images"></i></a></li>
  <li><a href="#"><i class="fas fa-envelope"></i></a></li>

SCSS: 

  li {
    height: 20%;
    width: 100%;
    list-style: none;
    text-align: center;
    &:nth-child(1) {
      border-right: 6px solid #2196F3;
    }
    &:nth-child(2) {
      border-right: 6px solid #00BCD4;
    }
    &:nth-child(3) {
      border-right: 6px solid #4CAF50;
    }
    &:nth-child(4) {
      border-right: 6px solid #FFC107;
    }
    &:nth-child(5) {
      border-right: 6px solid #FF5722;
      border-bottom: none;
    }
    a {
      color: $white;
      line-height: 20vh;
    }
  }

Я пробовал это, но я получил неопределенное 

let icons = document.querySelectorAll('li');
console.log(icons.style.borderColor);

Извините за этот вопрос нуба.Спасибо за помощь !Хорошего дня:)

1 Ответ

0 голосов
/ 26 мая 2018

Прежде всего вы получаете список элементов в вашей переменной icons.Вы должны пройти через него, чтобы найти цвет границы каждого элемента. 

var icons = document.querySelectorAll('li');
icons.forEach(function(i) {
   console.log(i)
   console.log(i.style['background-color']);
});
...