Estoy tratando de cambiar la propiedad de brecha de flexbox de un div cuando llamo a una función de JavaScript, pero parece que no puedo acceder a ella, aquí está el código actual:
.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>Esto es lo que intenté agregar en el archivo main.js, ninguno funcionó:
document.getElementById('botCont').style.gap = 40; document.getElementById('botCont').style.flex.gap(40); document.getElementsByClassName('bottomCont').css('gap', '40%')Traté de usar console.log para inspeccionar pero no obtengo ningún valor devuelto.
También debe especificar la unidad, por lo que
document.getElementById('botCont').style.gap = '40px';o
document.getElementById('botCont').style.gap = '40%';en la propiedad gap, el valor será de longitud como (px) o porcentaje. comprobar mdn
en el archivo js agregará valor con longitud o porcentaje como este:
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>