JS问题：当banner-section无内容时为body添加no-banner类失败求助

原代码有两个核心问题：

• document.querySelector('.banner-section')返回单个DOM元素，不是数组/类数组对象，没有length属性。!banner.length等价于!undefined，结果永远为true，所以不管banner有没有内容都会给body加no-banner类。
• 逻辑判断偏差：需求是当banner-section元素无内容时加类，不是元素不存在时加类。

修复后的代码 #

JavaScript #

function bannerCheck() {
  const banner = document.querySelector('.banner-section');
  // 先确保元素存在，再检查内容是否为空（去除空白字符后）
  if (banner && banner.textContent.trim() === '') {
    document.body.classList.add('no-banner');
  }
}

bannerCheck();

测试场景示例 #

当banner-section为空（包括仅含空格、换行等空白字符）时，body会被加上no-banner类：

<body>
  <div class="banner-section">
    <!-- 仅空白内容或完全为空 -->
  </div>
</body>

当banner-section包含实际内容时，不会给body添加类，完全符合需求。

补充说明 #

• 用textContent.trim()是为了排除元素内只有空白字符的情况，更贴合“无内容”的实际判定标准。
• 先判断banner是否存在，避免元素不存在时调用textContent引发报错。

内容的提问来源于stack exchange，提问作者jeet arya