De hecho, necesito aumentar la altura para aumentar la parte inferior y la parte superior de div cada uno por 25 px, también el lado izquierdo y derecho cada uno por 25 px. No sé si eso es posible.
Así que esto es solo un ejemplo, pero es similar a mi código:
function increaseDiv() { var myDiv = document.querySelector(".box") var currWidth = myDiv.clientWidth; myDiv.style.width = currWidth + 100 + "px"; } .box { width: 300px; height: 200px; position: absolute; left: 100px; background: black; } <div class="box"></div> <button onclick="increaseDiv()">Click</button>Aquí está la demostración https://jsfiddle.net/SutonJ/0pdwm39a/14/
El problema es que la posición de su div está relacionada con el lado izquierdo y es por eso que parece que solo aumenta el lado derecho; intente agregar posicionamiento con transformación por centro o hágalo por flexión (alinear elementos + justificar contenido)
.box { width: 300px; height: 200px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); background: black; }¿Qué pasa con la escala CSS?
Eso mantendrá la posición real del elemento y lo expandirá en todas las direcciones, a menos que especifique un valor de origen de transformación .
Editado con un efecto cada vez mayor...
let myDiv = document.querySelector(".box"); let orgiSize = myDiv.getBoundingClientRect().width; let increments = 0; function increaseDiv() { increments += 50; // That is 25px on both sides... // Make the math here var percentage = Math.floor((orgiSize + increments) / orgiSize * 100) / 100 console.log(percentage); myDiv.style.transform = `scale(${percentage})`; // That is a percentage value } .box { width: 300px; height: 200px; position: absolute; left: 100px; background: black; } /* for the demo */ button { position: absolute; z-index: 9999; } <div class="box"></div> <button onclick="increaseDiv()">Click</button>Si te estoy entendiendo bien, creo que si cambiaste
var currWidth = myDiv.clientWidth; myDiv.style.width = currWidth + 100 + "px";a
var currWidth = myDiv.getBoundingClientRect().width; myDiv.style.width = currWidth + 50 + "px";y también agregó
var currHeight = myDiv.getBoundingClientRect().height; myDiv.style.height = currHeight + 50 + "px";También noté que su div está usando un posicionamiento absoluto, por lo que es posible que también deba compensar la izquierda y la parte superior de acuerdo con el cambio de tamaño. Si tiene algún problema con la posición real cuando cambia el tamaño, hágamelo saber.