显示：none 在 html

Question

我有这个代码：

   <div id="affichageRecherche"></div>
   <div class="row px-xl-9 d-flex justify-content-start" id="affichageCatalogue">(lot of code)</div>

页面底部的脚本：

<script>
let recherchePieceDetachees = document.getElementById('recherchePieceDetachees');
let affichageRecherche = document.getElementById('affichageRecherche');
let affichageCatalogue = document.getElementById('affichageCatalogue');

        recherchePieceDetachees.addEventListener('keyup', () => {
        if(recherchePieceDetachees.value.length > 2){

            affichageCatalogue.style.display = "none";
            fetch('../../requetes/catalogue-piece-detachee.php?recherche='+recherchePieceDetachees.value)
                .then(response => response.text())
                .then((response) => {
                    console.log(affichageCatalogue.style.display)
                    
                    affichageRecherche.innerHTML = response;
                })
                .catch(err => console.log(err));
                
        }else{
            affichageCatalogue.style.display = "block";
            affichageRecherche.innerHTML = "";
        }
    });
</script>

但是当 recherchePieceDetachees.value.lenght > 2 affichageCatalogue.style.display = "none" 时不起作用。

在“控制台显示：none是写的，但是块总是可见的...

Console

有人可以帮助我吗？对不起我的英语... :) 谢谢！

Answer 1

您在该元素中有 d-flex class。通常，内联样式具有最高优先级，但如果样式规则包含 !important，则会应用它。 Bootstrap 使用以下代码

.d-flex{
    display: flex !important;
}

因为它有 !important，它将被应用，你的内联样式将被忽略。

不太推荐内联样式。您可以简单地添加 class 名称 d-none 因为您使用的是 Bootstrap.

显示：none 在 html

Display: none in html

javascript

display

bootstrap-4