I'm trying to change the flexbox gap property of a div when calling a JavaScript function, but I cannot seems to access it, here is the current code:
.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>Here is what I've tried to add in the main.js file, none worked:
document.getElementById('botCont').style.gap = 40;
document.getElementById('botCont').style.flex.gap(40);
document.getElementsByClassName('bottomCont').css('gap', '40%')
I tried to use console.log to inspect but I do no get any returned value.
You need to specify the unit as well, so
document.getElementById('botCont').style.gap = '40px';
or
document.getElementById('botCont').style.gap = '40%';
in gap property the value will be length like (px) or percentage. check mdn
in js file you will add value with length or percentage like this:
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>