为所有 <li> 查找边框颜色

Question

不好意思，我刚开始学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);

抱歉这个菜鸟问题。感谢帮助！祝你有美好的一天:)

Answer 1

首先，您将获得 icons 变量中的元素列表。您必须遍历它才能找到每个元素的边框颜色。

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

为所有 <li> 查找边框颜色

Find border-color for all <li>

javascript

styles

element