当我改变css＆＃34;显示＆＃34;时，页面上没有任何变化。通过javascript元素的属性

Question

我有simle应用程序，用于过滤列表（显示匹配并隐藏其余项目的项目）

有一个由输入＆＃39;触发的功能。 <input>元素上的事件。它会改变＆＃34;显示＆＃34; <li>元素的属性。最后，它为每个<li>添加了适当的属性值（块或无）。但是，我没有在页面上看到任何更改。

这是一段代码：

function filterInput(e) {
   //value from <input> element
   let keyValue = e.target.value;
   //all items from list
   let listOfTasks = document.querySelectorAll('.list-group-item');
   listOfTasks.forEach(function (task) {
      const item = task.firstChild.textContent;
      if(~item.indexOf(keyValue)){
         task.style.display = 'block';
      } else {
         task.style.display = 'none';
      }
   });
}

以下是事件前元素的屏幕截图：

以下是事件后元素的屏幕截图：

在页面上没有任何变化：

Answer 1

我最好的猜测是＆＃34; .list-group-item＆＃34;有＆＃34; display：block！important＆＃34;，它优先于内联样式。因为内联样式已分配，但未生效......