使用 Javascript 更改 flexbox 间距属性

Question

我试图在调用 JavaScript 函数时更改 div 的 flexbox 间隙属性，但我似乎无法访问它，这是当前代码：

.bottomCont {
  position: absolute;
  display: flex;
  left: 25%;
  top: 80%;
  right: 25%;
  bottom: 0;
  flex-wrap: nowrap;
  align-items: center;
  margin: 5% 5%;
  justify-content: center;
  gap: 10%;
}

<div id="botCont" class="bottomCont">
  <div class="leftControls"></div>
  <div class="eraser"> erase </div>
  <div class="rightControls"><button id="sizeGrid" class="gridSize">CHANGE GRID SIZE</button></div>
</div>

这是我尝试在 main.js 文件中添加的内容，none 有效：

document.getElementById('botCont').style.gap = 40;
document.getElementById('botCont').style.flex.gap(40);
document.getElementsByClassName('bottomCont').css('gap', '40%')

我尝试使用 console.log 进行检查，但没有得到任何返回值。

Answer 1

你还需要指定单位，所以

document.getElementById('botCont').style.gap = '40px';

或

document.getElementById('botCont').style.gap = '40%';

Answer 2

在间隙属性中，值将是长度（像素）或百分比。 check mdn

在 js 文件中，您将添加具有长度或百分比的值，如下所示：

let changeGap = document.querySelector("#sizeGrid"),
    botCont = document.querySelector("#botCont");

changeGap.addEventListener("click", function () {
    botCont.style.gap = "20%";
});

        .bottomCont {
            position: absolute;
            display: flex;
            left: 25%;
            top: 80%;
            right: 25%;
            bottom: 0;
            flex-wrap: nowrap;
            align-items: center;
            margin: 5% 5%;
            justify-content: center;
            gap: 10%;
        }

    <div id="botCont" class="bottomCont">
        <div class="leftControls"></div>
        <div class="eraser"> erase </div>
        <div class="rightControls">
            <button id="sizeGrid" class="gridSize">CHANGE GRID SIZE</button>
        </div>
    </div>

使用 Javascript 更改 flexbox 间距属性

Change the flexbox gap property using Javascript

javascript

css

flexbox

使用 Javascript 更改 flexbox 间距 属性

Change the flexbox gap property using Javascript

javascript

css

flexbox

使用 Javascript 更改 flexbox 间距属性