Bootstrap 5中如何用原生JS根据视口宽度增减bg-opacity类？

我刚接触网页开发，正在使用Bootstrap 5搭建网页。我希望根据视口宽度为navbar添加或移除Bootstrap的bg-opacity类，原本打算用JavaScript实现，但找到的jQuery函数无法生效，因为Bootstrap 5不再依赖jQuery。请问有没有简单的方法实现Bootstrap类的添加与移除？

我尝试使用的jQuery函数如下：

jQuery(document).ready(function($) {
    var alterClass = function() {
      var ww = document.body.clientWidth;
      if (ww < 767) {
        $('.navbar').addClass('bg-opacity-75');
      } else if (ww >= 768) {
        $('.navbar').removeClass('bg-opacity-75');
      };
    };
    $(window).resize(function(){
      alterClass();
    });
    //Fire it when the page first loads:
    alterClass();
  });

方法一：原生JavaScript实现 #

把原来的jQuery代码改成原生JS即可，完全不需要依赖第三方库，直接用浏览器自带的API：

document.addEventListener('DOMContentLoaded', function() {
  const alterClass = function() {
    const viewportWidth = window.innerWidth;
    const navbar = document.querySelector('.navbar');
    if (viewportWidth < 767) {
      navbar.classList.add('bg-opacity-75');
    } else {
      navbar.classList.remove('bg-opacity-75');
    }
  };

  // 页面加载完成后执行一次
  alterClass();
  // 窗口大小改变时自动执行
  window.addEventListener('resize', alterClass);
});

要点说明：

• 用DOMContentLoaded替代jQuery的$(document).ready()，确保DOM加载完毕再操作元素
• 用window.innerWidth获取视口宽度，比document.body.clientWidth更精准
• 通过document.querySelector('.navbar')定位导航栏元素
• 用原生的classList.add()和classList.remove()来添加/移除类，这是浏览器标准API

方法二：CSS媒体查询（更简单，无需JS） #

如果只是为了控制导航栏的背景透明度，完全可以用CSS媒体查询实现，不需要写任何JS代码，更省心：

/* 大屏下默认的背景样式（无透明度） */
.navbar {
  /* 可自定义大屏下的背景相关样式 */
}

/* 当视口宽度≤767px时，设置背景透明度为0.75 */
@media (max-width: 767px) {
  .navbar {
    --bs-bg-opacity: 0.75;
  }
}

要点说明：

• Bootstrap的bg-opacity-75类本质就是给元素设置了--bs-bg-opacity: 0.75这个CSS变量
• 直接在媒体查询中修改这个变量，就能达到和添加/移除类完全一样的效果
• 这种方法不需要监听窗口变化，浏览器会自动适配视口宽度，代码更简洁易维护

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