I need to increase height actually to increase bottom and top of div each for 25px also left and right side each for 25px.I don't now is that even possible.

So this is just example but it is similar to my code:

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>

I need to increase height actually to increase bottom and top of div each for 25px also left and right side each for 25px.I don't now is that even possible.

So this is just example but it is similar to my code:

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>

Here is demo https://jsfiddle/SutonJ/0pdwm39a/14/

• javascript
• html
• css

Share Improve this question Follow edited Jan 28, 2022 at 22:28 Suton7 asked Jan 28, 2022 at 22:12 Suton7Suton7 3311 silver badge55 bronze badges 6

• 1 So what's the question? – maraaaaaaaa Commented Jan 28, 2022 at 22:15
• How to add to do all left sides 25px – Suton7 Commented Jan 28, 2022 at 22:16
• How many left sides are there? Please clarify the problem. – gru Commented Jan 28, 2022 at 22:18
• @Suton7 your JSFiddle seems to be expanding the div without issue. You are asking about 25px expansions but your code has 100px written in it, I am still not sure what you are trying to do – maraaaaaaaa Commented Jan 28, 2022 at 22:19
• @gru Sorry I thought four sides – Suton7 Commented Jan 28, 2022 at 22:21

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

The problem is that position of your div are related to left side and this is why it looks like you increase only the right side; try to add positioning with transform by center or make it by flex(align-items + justify-content)

.box {
  width: 300px;
  height: 200px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background: black;
}

If I am understanding you correctly, I think if you changed

var currWidth = myDiv.clientWidth;
myDiv.style.width = currWidth + 100 + "px";

to

var currWidth = myDiv.getBoundingClientRect().width;
myDiv.style.width = currWidth + 50 + "px";

and also added

var currHeight = myDiv.getBoundingClientRect().height;
myDiv.style.height = currHeight + 50 + "px";

I also noticed that your div is using absolute positioning, so you may also need to offset the left and top according to the size change. If you are getting an issue with the actual position when the size changes let me know.

What about CSS scale?

That will keep the actual position of the element and expand it in all directions, unless you specify a transform-origin value.

Edited with an ever growing effect...

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>