JS设置元素display:none控制台打印正常但元素仍可见如何解决

你使用的Bootstrap的d-flex工具类自带!important修饰符，默认规则如下：

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

你通过行内样式设置的display: none没有加!important，优先级低于带!important的类选择器规则，所以不会生效，这是该问题的核心原因。控制台打印的affichageCatalogue.style.display仅读取行内属性值，不代表该属性最终会被浏览器渲染生效。

方案1（推荐，适配Bootstrap规范） #

通过切换Bootstrap自带的d-none类实现显隐控制，d-none同样带!important修饰，优先级足够覆盖d-flex的规则：
将原有JS的显隐逻辑替换为以下代码：

// 隐藏逻辑
affichageCatalogue.classList.add('d-none');
// 显示逻辑
affichageCatalogue.classList.remove('d-none');

该方案不需要修改CSS，也不会破坏元素原有的flex布局属性。

方案2（直接操作行内样式） #

如果你需要直接修改style属性，可通过setProperty方法添加!important修饰，同时注意显示时要还原为flex布局，不要设置为block，否则会破坏原有排版：

// 隐藏逻辑
affichageCatalogue.style.setProperty('display', 'none', 'important');
// 显示逻辑
affichageCatalogue.style.setProperty('display', 'flex', 'important');

方案3（自定义CSS类） #

你也可以新增自定义高优先级隐藏类，再通过JS控制类的增减：
首先添加CSS规则：

.catalogue-hide {
  display: none !important;
}

JS逻辑修改为：

// 隐藏逻辑
affichageCatalogue.classList.add('catalogue-hide');
// 显示逻辑
affichageCatalogue.classList.remove('catalogue-hide');

修改代码后打开浏览器F12开发者工具，选中affichageCatalogue元素，查看「计算样式」面板的display属性值，同时可以查看生效规则的来源，确认样式覆盖成功。

内容的提问来源于stack exchange，提问作者René Wetta