特定屏幕尺寸下移除元素底部边框样式失效问题解决

代码失效是三个硬伤导致的：

• 重复使用相同ID：HTML要求页面内ID全局唯一，document.getElementById("b-brdr")只会选中第一个匹配该ID的元素，其余所有同ID元素根本不会被选中操作。
• 逻辑缺项：只写了视口宽度≤992px时移除下边框的逻辑，没写宽度回到992px以上时还原边框的逻辑，窗口大小来回切换的时候样式会乱。
• 方案选型不合理：这类纯响应式样式调整用CSS原生媒体查询实现性能更好、稳定性更高，完全没必要用JS监听视口变化来做。另外你用的x.addListener是已经废弃的旧API，现代浏览器兼容性更好的写法是addEventListener。

这是最推荐的写法，步骤如下：

1. 把所有元素上重复的id="b-brdr"全部删掉，在这些元素的class属性里追加通用类名b-brdr，比如左侧黄色提示块的代码改成：

<div class="border border-dark col-lg-3 bg-warning d-flex flex-column justify-content-center b-brdr">

其余所有原来加了id="b-brdr"的表单块都按这个规则改，把重复ID换成追加b-brdr类即可。
2. 新增一段CSS样式：

@media (max-width: 992px) {
  .border.b-brdr {
    border-bottom: none;
  }
}

这里选择器用.border.b-brdr是为了和Bootstrap自带边框类的优先级匹配，不需要加!important就能正常覆盖原有边框样式。

如果一定要用JS控制样式，按下面修改：

1. 第一步和上面一样，先把所有重复的id="b-brdr"替换成class类名b-brdr，先修正HTML不规范的问题。
2. 把原有JS代码替换为：

const screenQuery = window.matchMedia("(max-width: 992px)");
// 页面初始化时先执行一次
toggleBottomBorder(screenQuery);
// 监听视口尺寸变化
screenQuery.addEventListener('change', toggleBottomBorder);

function toggleBottomBorder(query) {
  const allTarget = document.querySelectorAll('.b-brdr');
  allTarget.forEach(item => {
    if (query.matches) {
      item.style.borderBottom = 'none';
    } else {
      // 尺寸恢复时移除内联样式，还原原有CSS边框
      item.style.borderBottom = '';
    }
  })
}

内容的提问来源于stack exchange，提问作者Md Mohtesham Azam