JavaScript获取所有<li>边框颜色返回undefined，求解决方案
2026-5-29
解决获取元素边框颜色返回undefined的问题
嘿，我来帮你搞定这个问题～你遇到的undefined主要有两个核心原因，咱们一步步拆解解决：
问题1：querySelectorAll返回的是元素集合，不是单个DOM元素
你用document.querySelectorAll('li')拿到的是一个NodeList类型的元素集合，这个集合本身并没有.style属性——只有单个DOM元素才具备这个属性，所以直接访问icons.style自然会返回undefined。
问题2：.style只能读取行内样式，无法获取样式表中的样式
你在SCSS里定义的边框样式属于外部样式表规则，不是写在元素style属性里的行内样式。而element.style只能读取元素的行内样式，哪怕你拿到单个
.style.borderColor也拿不到SCSS里设置的颜色。修正后的代码
我们需要遍历集合里的每个元素，再用getComputedStyle()方法获取元素实际生效的计算样式：
let icons = document.querySelectorAll('li'); // 遍历每个<li>元素 icons.forEach(li => { // 获取该元素当前所有生效的计算样式 const computedStyle = getComputedStyle(li); // 因为你设置的是border-right颜色，针对性获取这个属性更准确 console.log(computedStyle.borderRightColor); });
补充说明
getComputedStyle()会返回一个包含元素所有实际应用样式的对象，不管样式来自外部样式表、内联代码还是浏览器默认规则。- 因为你在SCSS里给每个
- 设置的是
border-right，所以用borderRightColor（JS里用驼峰命名对应CSS的短横线命名）能精准拿到你设置的颜色；如果用borderColor，它会返回四个边框的颜色组合值，这里其他边框无设置会返回默认透明值，针对性取值更合适。
内容的提问来源于stack exchange，提问作者haestan
相关产品推荐
相关产品推荐
