时间戳

首页 > 解决方案 > 无法访问属性“color”，icon.style 未定义

javascript - 无法访问属性“color”，icon.style 未定义

问题描述

我无法更改任何样式属性边框、颜色等，为什么？我总是得到：

未捕获的类型错误：无法访问属性“颜色”，icon.style 未定义

<!-- this element is created multipleTimes by loop -->
     
<li class="list-group-item">
                <span>
                  <input class="input_Text" data-verb="<%= data %>" type="text">
                  <i class="fas fa-check checkIcon" ></i>
                </span>
                
                </li>
    let check = document.querySelectorAll('.input_Text')

/* 这里 */

var icon = document.querySelectorAll('.checkIcon');

check.forEach(element => element.addEventListener('input',(e)=>{
   var data = element.getAttribute('data-verb').toString();
   var value = e.target.value;
   
   
   if (value == ""){
    element.style.border = "1px solid blue";
    element.style.color = "black";
   }
   else if (data.startsWith(value)){
      element.style.border = "5px solid green";
      element.style.color = "green";
   }
   else{
      element.style.border = "5px solid red";
      element.style.color = "red";
   }


 <!-- HERE -->
       value == data?icon.style.color = "green" : null;
    
    
}));

标签： javascript

解决方案

这是因为iconquerySelectorAll 不是元素本身（请参阅下文如何返回单个元素）。

它返回一个与 Array 非常相似的NodeList 。要执行您想要的操作，您需要获取此列表返回的第一个节点。一些方法可以做到这一点：

// Deconstructing it as an array, I'm not sure if you can really do this with a NodeList, should be tested
var [icon] = document.querySelectorAll('.checkIcon');

// Get item x where x is the index (in your case, 0, the first element)
var icon = document.querySelectorAll('.checkIcon').item(0);

// This is valid syntax, same as .item()
var icon = document.querySelectorAll('.checkIcon')[0];

获取单个元素本身

或者，如本答案评论中所述，您可以使用 Document's .querySelector()API直接选择元素

参考：

推荐阅读