查找所有边框<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']);
});