如何根据 javascript 中的点击按钮更新 CSS

Question

我正在使用 bootstrap5 构建一个简单的网站（目前没有 JS）。当我最小化屏幕以使导航栏成为汉堡按钮时，我希望每当我单击它并显示菜单时，下面元素的边距顶部会增加，以便菜单不会写在顶部它。

我认为在 JS 中有一种方法可以做到这一点，但我已经尝试了一些没有用的方法。

这里是我的代码的摘录：

<nav class="navbar navbar2 navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
    <button class="navbar-toggler" id="button-burger" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav navbar-center2">
.........
.........
.........
.........
</nav>

<div class="container-fluid nav-wrapper" id="container-below-header">

基本上我想把下面div的class改成每当我点击按钮的时候就改。感谢您的帮助！

Answer 1

您可以在点击时使用 element.classList.toggle("ClassName"); 到 add/remove class

select toggle-able 元素
select 附加点击监听器的元素
添加点击事件监听器

    var element = document.querySelector(".myclass");
    var someElement = document.querySelector(".otherClass");
    someElement.addEventListener('click', function () {
        element.classList.toggle("show");
    });

Answer 2

您可以通过创建两个类来实现。

将包含按钮处于活动状态（即单击）时的所有样式
将包含按钮处于非活动状态时的所有样式。

css

.active{...styles when button is clicked}
.inactive{ ... }

JS

const button = document.getElementById(' id for that button');
button.addEventListener("click",()=>{
      if(button. classList.contains(".active")){
           button. classList.remove(".active");
           button.classList.add(".inactive")
    }else{
        button.classList.add(".active");
        button.classList.remove(".inactive");
    }
  })

如何根据 javascript 中的点击按钮更新 CSS

How to update CSS based on click button in javascript

html

javascript

css

bootstrap-5