我有一个简单的应用程序,旨在过滤列表(显示匹配项并隐藏其余项)
在<input>
元素上有由输入事件触发的功能。它更改<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';
}
});
}
这是事件发生前的元素的屏幕截图:
这是事件发生后元素的屏幕截图:
在页面上没有任何变化:
最佳答案
我最好的猜测是,“。list-group-item”的CSS具有“ display:block!important”,它优先于内联样式。因为已分配了内联样式,但并没有生效...
关于javascript - 当我通过JavaScript更改元素的CSS“显示”属性时,页面上没有任何变化,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48630212/