Repeatedly reduce the width of a div

Question

I need the width of a specific <div> to get smaller by 50px every time a JavaScript function is called.

I tried

document.getElementById("Zivot").style.width = "100px";

But that just sets the width, and doesn't add or subtract it.

I would recommend determining the width, then subtracting 50 — Jaromanda X, Jan 02 '16 at 14:06

Sumit · Accepted Answer · 2016-01-02T14:08:28.093

7

Use this code. Get the width using offsetWidth and reduce it by 50px every time.

var element = document.getElementById('Zivot'); 
element.style.width = (element.offsetWidth - 50) + 'px';

edited Jan 02 '16 at 14:08

answered Jan 02 '16 at 14:07

Sumit

1,619
1
11
24

Might want to change the id. – Donnie D'Amato Jan 02 '16 at 14:08
Did it just performed on this site :P – Sumit Jan 02 '16 at 14:08

score 2 · Answer 2 · edited May 23 '17 at 12:30

A pure Javascript way of getting this working-

var zivotID = document.getElementById("Zivot");
zivotID.style.width = zivotID.offsetWidth - 50;

document.getElementById("Zivot").style.width or myID.style.width - Here you actually set the value of width. I mean, you wait for a value to be given so that you can set.

document.getElementById("Zivot").offsetWidth or myID.offsetWidth - This gets the width of the div/element.

Some reference links-

How to find the width of a div using raw Javascript?

HTMLElement.offsetWidth

How do I retrieve an HTML element's actual width and height?

Hope it helps :)

score 0 · Answer 3 · answered Jan 02 '16 at 14:07

0

var currentWidth = $('#Zivot').width();
$('#Zivot').css('width', currentWidth - 50 + 'px');

answered Jan 02 '16 at 14:07

Donnie D'Amato

3,832
1
15
40

One of his tags is jQuery. – Donnie D'Amato Jan 02 '16 at 14:14

Repeatedly reduce the width of a div

3 Answers3