js code for adding width of a class is not working

Question

I want to change the width by adding 20%. My div class width in percentage. For example i have div with width 20%. I am using class name for stylesheet. When each time the page loading it want increase by 10%. The code is shown below. the avascript code document.getElementsByClassName("box")[0].style.width; is not working` proper. Please help me.

html

<div class="box">

var width = document.getElementsByClassName("box")[0].style.width;

var n = width + 20%;

width = n;

.box{
  width:40%;
  height:300px;
  background-color:red;
}

<div class="box">
</div>

`var n = width + 20%;` this is not valid javascript. You would have noticed if you ran your own code and checked the debugger. — Federico klez Culloca, Dec 07 '17 at 09:40
[Get element CSS property (width/height) value as it was set (in percent/em/px/etc)](https://stackoverflow.com/questions/9730612/get-element-css-property-width-height-value-as-it-was-set-in-percent-em-px-et) — Alive to die - Anant, Dec 07 '17 at 10:06

gurvinder372 · Accepted Answer · 2017-12-07T09:58:35.080

3

This line has a syntax error

width + 20%;

If you want to calculate percentage then

width = width + width*20/100;

Edit

As @Rory pointed out in the comments, your width value isn't getting set because width value isn't getting fetched correctly at first place, here is the updated code

var ele = document.getElementsByClassName("box")[0];
var width = parseInt(window.getComputedStyle(ele).width); //get computed style instead of style property
width = width + width*20/100;
document.getElementsByClassName("box")[0].style.width = width;

Edit 2

As pointed out by @Anant, if you want to increase with in percentage, then

var fn = (elem) => ((elem.offsetWidth/(elem.offsetParent || elem).offsetWidth)*100).toFixed(2)+'%' ;
var ele = document.getElementsByClassName("box")[0];
var width = parseInt(fn(ele)); //get computed style instead of style property
console.log(width);
//width = width + width*20/100;
width = (width + 20) + "%";
console.log(width);
document.getElementsByClassName("box")[0].style.width = width;

Demo

var fn = (elem) => ((elem.offsetWidth/(elem.offsetParent || elem).offsetWidth)*100).toFixed(2)+'%' ;

var ele = document.getElementsByClassName("box")[0];
var width = parseInt(fn(ele)); //get computed style instead of style property
console.log(width);
//width = width + width*20/100;
width = (width + 20) + "%";
console.log(width);
document.getElementsByClassName("box")[0].style.width = width;

.box{
  width:40%;
  height:300px;
  background-color:red;
}

<div class="box">
</div>

edited Dec 07 '17 at 09:58

answered Dec 07 '17 at 09:41

gurvinder372

66,980
10
72
94

Note that this is just increasing an integer value - it's not actually increasing the width of the `div` element. Also you can just do `width = width * 1.2` – Rory McCrossan Dec 07 '17 at 09:44
I have used the code as "var width=document.getElementsByClassName("box")[0].style.width;width = width + width*20/100;". But it is not working. – Fazil fazi Dec 07 '17 at 09:47
@RoryMcCrossan I have fixed that part as well. Thanks for pointing out the same. – gurvinder372 Dec 07 '17 at 09:48
@gurvinder372 it's about `%` not `px`. – Alive to die - Anant Dec 07 '17 at 09:51
@AlivetoDie--Anantsingh `%` works the same way as well, updated the demo. – gurvinder372 Dec 07 '17 at 09:52
@gurvinder372 still width is 40% – Alive to die - Anant Dec 07 '17 at 09:53
@AlivetoDie--Anantsingh Fixed that part as well. Thanks for pointing out. – gurvinder372 Dec 07 '17 at 09:58
why 40+20 become 59% not 60% – Alive to die - Anant Dec 07 '17 at 10:01
@AlivetoDie--Anantsingh It is becoming 60 on my machine on chrome 62. – gurvinder372 Dec 07 '17 at 10:07

js code for adding width of a class is not working

1 Answers1